/* bloklar — BLOK design language.
   Paper map, ink borders, hard offset shadows, taxi-yellow primary, block
   characters with eyes. Flat colors only: no glass, no gradients, no blur. */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:500 800;font-display:swap;
  src:url('/fonts/baloo2-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:500 800;font-display:swap;
  src:url('/fonts/baloo2-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root {
  --ink: #1d1b16;
  --paper: #fffdf7;
  --page: #f4efe6;
  --taxi: #ffc800;
  --tram: #e2372b;
  --sea: #2f7fbe;
  --grass: #3fa356;
  --note: #fff8d6;
  --txt2: rgba(29, 27, 22, .62);
  --txt3: rgba(29, 27, 22, .45);
  --line: rgba(29, 27, 22, .14);
  --sh: 4px 4px 0 var(--ink);
  --sh-sm: 3px 3px 0 var(--ink);
  --sh-xs: 2px 2px 0 var(--ink);
  --r: 14px;
  --r-sm: 10px;
  --bw: 3px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: 'Baloo 2', system-ui, sans-serif;
  background: var(--page); color: var(--ink);
  overscroll-behavior: none; touch-action: none;
  -webkit-font-smoothing: antialiased;
}
#map { position: absolute; inset: 0; background: #e9e5dc; }
.hidden { display: none !important; }

.panel::-webkit-scrollbar, .pm-panel::-webkit-scrollbar { width: 6px; }
.panel::-webkit-scrollbar-thumb, .pm-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.leaflet-control-attribution { font-size: 10px; opacity: .55; }
.leaflet-marker-icon { background: transparent !important; border: none !important; }

/* ---- shared controls ---- */
input[type="text"], input[type="password"], input[type="email"], input[type="date"],
#nameInput, #chatInput, #authBox input, #stepLogin input,
#stepRegister input:not(#termsChk), #profEdit input, #pmRow input, .mbody input {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  border: var(--bw) solid var(--ink); background: #fff; color: var(--ink);
  font: inherit; font-weight: 600; font-size: 15px; outline: none;
  box-shadow: inset 3px 3px 0 rgba(29, 27, 22, .06);
  transition: box-shadow .12s;
}
input::placeholder { color: var(--txt3); font-weight: 600; }
input:focus { box-shadow: inset 3px 3px 0 rgba(29,27,22,.06), 0 0 0 3px var(--taxi); }

.cta {
  margin-top: 14px; width: 100%; padding: 14px; border: var(--bw) solid var(--ink);
  border-radius: var(--r); background: var(--taxi); color: var(--ink);
  font: inherit; font-size: 17px; font-weight: 800; cursor: pointer;
  letter-spacing: 1.5px; box-shadow: var(--sh);
  transition: transform .06s, box-shadow .06s;
}
.cta:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.cta:disabled { opacity: .55; cursor: default; }

/* ---- join overlay ---- */
#overlay {
  position: absolute; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244, 239, 230, .55);   /* canlı harita hafif kağıt tülü altında */
}
#overlay.hidden { display: none; }
.panel {
  width: min(92vw, 372px);
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 18px;
  padding: 24px 22px; text-align: center;
  box-shadow: 6px 6px 0 var(--ink);
  max-height: 92vh; overflow-y: auto;
}
.wordmark { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.wordmark span {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px; color: #fff; border: var(--bw) solid var(--ink);
  border-radius: 9px; box-shadow: var(--sh-xs); transform: rotate(-2deg);
}
.wordmark span:nth-child(2n) { transform: rotate(2deg); }
.wordmark .w1 { background: var(--tram); } .wordmark .w2 { background: var(--sea); }
.wordmark .w3 { background: var(--taxi); color: var(--ink); } .wordmark .w4 { background: var(--grass); }
.wordmark .w5 { background: #9b59b6; } .wordmark .w6 { background: #ff6fae; } .wordmark .w7 { background: #e67e22; }
.panel .sub { margin: 0 0 16px; color: var(--txt2); font-size: 13.5px; font-weight: 600; }
.panel .label, .menu-label {
  text-align: left; font-size: 11px; color: var(--txt2);
  margin: 15px 2px 8px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 800;
}
#hint { margin: 13px 0 0; font-size: 12.5px; color: var(--txt2); min-height: 16px; font-weight: 600; }
#hint.err { color: var(--tram); }

#onlineRow {
  display: inline-flex; align-items: center; gap: 7px; margin: -4px 0 14px;
  background: #e9f7ee; border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 4px 13px; font-weight: 700; font-size: 12.5px; box-shadow: var(--sh-xs);
}
#onlineRow b { font-variant-numeric: tabular-nums; }
#charPrev { margin: 2px 0 14px; }
#prevChar {
  width: 58px; height: 58px; margin: 0 auto 8px; position: relative;
  border: var(--bw) solid var(--ink); border-radius: 15px; box-shadow: var(--sh);
  transform: rotate(-3deg); transition: background .2s;
}
#prevChar:after {
  content: ''; position: absolute; left: 11px; top: 15px; width: 9px; height: 9px;
  background: #fff; border-radius: 50%; border: 2px solid var(--ink);
  box-shadow: 18px 0 0 0 #fff, 18px 0 0 2px var(--ink);
}
#prevName { font-size: 13px; font-weight: 800; }
#authLinks { margin: 14px 0 0; display: flex; gap: 10px; }
.auth-btn {
  flex: 1; padding: 12px 8px; border: var(--bw) solid var(--ink);
  border-radius: var(--r); background: #fff; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  letter-spacing: 1px; box-shadow: var(--sh);
  transition: transform .06s, box-shadow .06s;
}
.auth-btn-reg { background: var(--sea); color: #fff; }
.auth-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.backLink { display: block; margin-top: 13px; font-size: 13px; color: var(--txt2); cursor: pointer; font-weight: 700; }
.backLink:hover { color: var(--ink); }
#stepLogin, #stepRegister { display: flex; flex-direction: column; gap: 9px; }
#whoBar { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--txt2); }
#whoBar b { color: var(--ink); }
#whoBar button {
  margin-left: 8px; padding: 4px 12px; border-radius: 8px; border: 2.5px solid var(--ink);
  background: #fff; color: var(--ink); font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; box-shadow: var(--sh-xs);
}
.field-hint { margin: -4px 2px 0; font-size: 11.5px; color: var(--txt3); text-align: left; font-weight: 600; }
.field-label { display: block; text-align: left; font-size: 11.5px; color: var(--txt2); margin: 2px 2px -2px; font-weight: 700; }
#termsRow { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--txt2); text-align: left; font-weight: 600; }
#termsRow a { color: var(--sea); font-weight: 800; }

/* renk blokları */
#palette { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; padding: 2px 0; }
.swatch {
  width: 36px; height: 36px; border-radius: var(--r-sm); cursor: pointer;
  border: var(--bw) solid var(--ink); box-shadow: var(--sh-xs);
  transition: transform .1s, box-shadow .1s;
}
.swatch:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.swatch.sel { outline: 3px solid var(--ink); outline-offset: 3px; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.swatch.owned { outline: 3px solid var(--taxi); outline-offset: 2px; }

/* ilçe çipleri */
#spawnRow { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.chip {
  padding: 9px 16px; border-radius: var(--r-sm); border: var(--bw) solid var(--ink);
  background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; box-shadow: var(--sh-xs); transition: transform .08s, box-shadow .08s;
}
.chip:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.chip.sel { background: var(--ink); color: var(--taxi); }
.chip.disabled { opacity: .45; }

/* ---- karakterler: gözlü bloklar ---- */
.char-wrap {
  position: relative; width: 27px; height: 27px;
  display: flex; align-items: center; justify-content: center;
  animation: popin .25s ease;
}
@keyframes popin { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
.char {
  position: relative;
  width: 27px; height: 27px; border-radius: 9px; border: var(--bw) solid var(--ink);
  box-shadow: var(--sh-xs); box-sizing: border-box;
  transform-origin: center center; will-change: transform;
}
/* gözler: anonimde küçük mürekkep nokta, üyede büyük beyaz göz */
.char:not(.veh-car):not(.veh-sport):after {
  content: ''; position: absolute; left: 6px; top: 9px; width: 3.5px; height: 3.5px;
  background: var(--ink); border-radius: 50%; border: none;
  box-shadow: 8px 0 0 0 var(--ink);
  transform: translate(var(--ex, 0px), var(--ey, 0px));
  transition: transform .22s ease-out;
}
.char.member:not(.veh-car):not(.veh-sport):after {
  left: 3px; top: 6px; width: 6px; height: 6px;
  background: #fff; border: 2px solid var(--ink);
  box-shadow: 10px 0 0 0 #fff, 10px 0 0 2px var(--ink);
}
/* kendi karakterin ince beyaz halka ile belli; üyelerde ekstra outline YOK */
.char.me { outline: 3px solid #fff; outline-offset: 2px; }

/* kuş bakışı SVG araçlar (gövde = currentColor, ön = yukarı) */
.char .v-car, .char .v-f1 { display: none; width: 100%; height: 100%; filter: drop-shadow(2px 2px 0 rgba(29,27,22,.35)); }
.char.veh-car, .char.veh-sport {
  background: transparent !important; border: none; box-shadow: none; border-radius: 0;
}
.char.veh-car { width: 23px; height: 34px; }
.char.veh-sport { width: 24px; height: 38px; }
.char.veh-car .v-car { display: block; }
.char.veh-sport .v-f1 { display: block; }
.char.veh-car.me, .char.veh-sport.me,
.char.veh-car.member, .char.veh-sport.member { outline: none; }

.nick {
  position: absolute; top: 31px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 800; color: var(--ink);
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 7px;
  padding: 0 7px; box-shadow: var(--sh-xs);
  white-space: nowrap; pointer-events: none;
}
.nick.me { background: var(--ink); color: var(--taxi); }
.nick.member { background: var(--taxi); color: var(--ink); }
.nick.me.member { background: var(--ink); color: var(--taxi); }

.bubble {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%) scale(.9) rotate(1deg);
  background: #fff; color: var(--ink); padding: 6px 11px;
  border: var(--bw) solid var(--ink); border-radius: 11px; box-shadow: var(--sh-sm);
  font-size: 13px; font-weight: 700; line-height: 1.25; white-space: pre-wrap; word-break: break-word;
  max-width: 180px; min-width: 0; width: max-content; text-align: center;
  opacity: 0; transition: opacity .18s, transform .18s; pointer-events: none;
}
.bubble.show { opacity: 1; transform: translateX(-50%) scale(1) rotate(1deg); }
.bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--ink);
}
.bubble.admin { background: #ff9d92; }
.bubble.admin::after { border-top-color: var(--ink); }

.emote {
  position: absolute; bottom: 31px; left: 50%; transform: translateX(-50%);
  font-size: 24px; opacity: 0; pointer-events: none; will-change: transform, opacity;
  filter: drop-shadow(2px 2px 0 rgba(29,27,22,.3));
}
.emote.play { animation: emoteFloat 1.3s ease-out; }
@keyframes emoteFloat {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(.4); }
  18%  { opacity: 1; transform: translate(-50%, -4px) scale(1.15); }
  35%  { opacity: 1; transform: translate(-50%, -10px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -44px) scale(1); }
}

/* ---- chat ---- */
#chatLog {
  position: absolute; left: 12px; bottom: 148px; z-index: 800;
  width: min(72vw, 340px); max-height: 30vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px; pointer-events: none;
}
.chat-line {
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 9px;
  box-shadow: var(--sh-xs);
  padding: 4px 10px; font-size: 13px; font-weight: 600;
  width: fit-content; max-width: 100%; word-break: break-word;
  animation: fadein .2s ease;
}
.chat-line b { font-weight: 800; color: #8b8578; }        /* anon: hafif koyu gri */
.chat-line.t-uye b { color: var(--sea); }                  /* üye: mavi */
.chat-line.t-prem b { color: #c28f00; }                    /* premium: sarı (okunur ton) */
.chat-line.admin { background: #ffe3df; }                  /* admin satırı: açık kırmızımsı */
.chat-line.admin b, .chat-line.t-admin b { color: #c22f21; } /* admin: kırmızımsı */
.chat-line.sys { color: var(--txt2); font-style: italic; border-style: dashed; box-shadow: none; }
.chat-line.dm { background: #f3ecff; }
.chat-line.dm b { color: #7048e8; }
.chat-line.expire { opacity: 0; transform: translateY(-3px); transition: opacity .9s, transform .9s; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

#chatForm {
  position: absolute; left: 12px; right: 74px; bottom: 92px; z-index: 900;
  display: none;   /* sağda araç butonu oturur: [yaz][gönder][araç] */
}
#chatForm.active { display: flex; }
#chatInput {
  width: min(100%, 420px); padding: 11px 15px;
  border-radius: var(--r-sm); box-shadow: var(--sh-sm), inset 3px 3px 0 rgba(29,27,22,.05);
}
#chatInput:focus { box-shadow: var(--sh-sm), 0 0 0 3px var(--taxi); }

/* ---- profil kartı ---- */
#profileCard {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1100; width: min(88vw, 306px);
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 18px;
  padding: 22px; text-align: center; box-shadow: 6px 6px 0 var(--ink);
}
#profClose, #pmlClose, #myClose {
  position: absolute; top: 10px; right: 12px; background: #fff; border: 2.5px solid var(--ink);
  border-radius: 8px; width: 30px; height: 30px; box-shadow: var(--sh-xs);
  color: var(--ink); font-size: 17px; font-weight: 800; cursor: pointer; line-height: 1; font-family: inherit;
}
#profAvatar, #myAv {
  width: 64px; height: 64px; border-radius: 16px; margin: 4px auto 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: #fff;
  border: var(--bw) solid var(--ink); box-shadow: var(--sh); transform: rotate(-2deg);
  background-size: cover !important; background-position: center !important;
}
#profName { font-size: 18px; font-weight: 800; }
#profBadges { font-size: 12.5px; font-weight: 800; margin: 3px 0 8px; color: #b8860b; }
#profBio { font-size: 13.5px; color: var(--txt2); min-height: 16px; word-break: break-word; font-weight: 600; }
#profJoined { font-size: 11.5px; color: var(--txt3); margin-top: 5px; font-weight: 600; }
#profActions { display: flex; gap: 8px; margin-top: 16px; }
#profActions button, #pmRow button, #profEdit button {
  flex: 1; padding: 11px 8px; border-radius: var(--r-sm); border: var(--bw) solid var(--ink);
  cursor: pointer; background: var(--sea); color: #fff;
  font: inherit; font-size: 13px; font-weight: 800; box-shadow: var(--sh-xs);
  transition: transform .06s, box-shadow .06s;
}
#profActions button:active, #pmRow button:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
#profActions #friendBtn { background: var(--grass); }
#profActions #reportBtn { flex: 0 0 46px; background: #fff; color: var(--ink); }
#profActions #blockBtn { flex: 0 0 46px; background: #fff; color: var(--tram); }
#profEdit { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
#pmRow { display: flex; gap: 8px; margin-top: 12px; }
#pmRow input { flex: 1; }
#pmRow button { flex: 0 0 auto; padding: 11px 15px; }

/* ---- modallar ---- */
#paywall, #ageGate, #panelModal, #myPanel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(29, 27, 22, .35);
}
#paywall { z-index: 1200; }
#ageGate { z-index: 1300; background: rgba(29, 27, 22, .5); }
#panelModal { z-index: 1150; }
#myPanel { z-index: 1150; }
.pw-panel, .pm-panel {
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink);
}
.pw-panel { width: min(86vw, 306px); padding: 26px 24px; text-align: center; }
.pm-panel { position: relative; width: min(90vw, 346px); max-height: 82vh; overflow-y: auto; padding: 22px; }
#pwIcon { font-size: 42px; }
#pwTitle { font-size: 18px; font-weight: 800; margin: 10px 0 6px; }
#pwText { font-size: 13.5px; color: var(--txt2); margin-bottom: 18px; line-height: 1.45; font-weight: 600; }
#pwAction {
  width: 100%; padding: 13px; border-radius: var(--r); border: var(--bw) solid var(--ink);
  cursor: pointer; background: var(--taxi); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 800; box-shadow: var(--sh);
  transition: transform .06s, box-shadow .06s;
}
#pwAction:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
#pwClose, #ageNo {
  width: 100%; margin-top: 10px; padding: 11px; border-radius: var(--r); cursor: pointer;
  background: #fff; border: 2.5px solid var(--ink); color: var(--txt2);
  font: inherit; font-size: 13px; font-weight: 700; box-shadow: var(--sh-xs);
}
#ageYes {
  width: 100%; padding: 13px; border-radius: var(--r); border: var(--bw) solid var(--ink);
  cursor: pointer; background: var(--grass); color: #fff;
  font: inherit; font-size: 15px; font-weight: 800; box-shadow: var(--sh);
}
#pmlTitle { font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.shop-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 2px dashed var(--line); }
.shop-row:last-child { border-bottom: none; }
.shop-swatch { width: 30px; height: 30px; border-radius: 9px; border: var(--bw) solid var(--ink); flex: 0 0 auto; box-shadow: var(--sh-xs); }
.shop-name { flex: 1; font-size: 14.5px; font-weight: 700; }
.shop-row button {
  padding: 8px 13px; border-radius: var(--r-sm); border: 2.5px solid var(--ink); cursor: pointer;
  background: var(--taxi); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 800; box-shadow: var(--sh-xs);
}
.shop-row button:disabled { background: #fff; color: var(--txt3); box-shadow: none; }
.quest-row { padding: 11px 0; border-bottom: 2px dashed var(--line); }
.quest-row:last-child { border-bottom: none; }
.quest-row.done .quest-name { color: var(--grass); }
.quest-name { font-size: 13.5px; font-weight: 700; margin-bottom: 7px; }
.quest-bar { height: 12px; border: 2.5px solid var(--ink); border-radius: 7px; background: #fff; overflow: hidden; }
.quest-bar div { height: 100%; background: repeating-linear-gradient(45deg, var(--taxi) 0 8px, #ffd94d 8px 16px); }

/* ---- verify banner ---- */
#verifyBar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 950;
  background: var(--note); border-bottom: var(--bw) solid var(--ink);
  color: var(--ink); font-size: 12.5px; font-weight: 700; padding: 8px 10px; text-align: center;
}
#verifyBar button {
  margin-left: 8px; padding: 4px 11px; border-radius: 7px; border: 2.5px solid var(--ink); cursor: pointer;
  background: var(--taxi); color: var(--ink); font: inherit; font-size: 11.5px; font-weight: 800; box-shadow: var(--sh-xs);
}

/* ---- HUD ---- */
#hud {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 900;
  display: flex; align-items: center; gap: 9px;
}
#hudAvatar {
  position: relative; width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
  border: var(--bw) solid var(--ink); cursor: pointer; padding: 0;
  font: inherit; font-size: 18px; font-weight: 800; color: #fff; line-height: 1;
  box-shadow: var(--sh-sm); transform: rotate(-2deg);
  transition: transform .08s;
  background-size: cover !important; background-position: center !important;
}
#hudAvatar:active { transform: rotate(-2deg) scale(.93); }
#avBadge {
  position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px;
  border-radius: 7px; background: var(--taxi); color: var(--ink); border: 2.5px solid var(--ink);
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
#hudLvBox {
  flex: 1; display: flex; align-items: center; gap: 9px;
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 12px;
  box-shadow: var(--sh-sm); padding: 8px 12px;
}
#hudLvBox #hudLv { font-size: 13.5px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
#xpBar { flex: 1; height: 11px; border: 2.5px solid var(--ink); border-radius: 6px; background: #fff; overflow: hidden; }
#xpFill { height: 100%; width: 0; background: repeating-linear-gradient(45deg, var(--taxi) 0 8px, #ffd94d 8px 16px); transition: width .4s; }
#hudCoin {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13.5px;
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 12px;
  box-shadow: var(--sh-sm); padding: 10px 12px; line-height: 1;
}
body.mobile #hud { top: 36px; }

/* ---- toasts ---- */
#toasts {
  position: absolute; top: 70px; left: 50%; transform: translateX(-50%);
  z-index: 1250; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; width: max-content; max-width: 88vw;
}
.toast {
  background: var(--note); border: var(--bw) solid var(--ink); border-radius: 10px;
  color: var(--ink); padding: 8px 15px; font-size: 13.5px; font-weight: 700;
  box-shadow: var(--sh-sm); max-width: 88vw; transform: rotate(-1deg);
  animation: toastIn .25s cubic-bezier(.2,.9,.3,1.2);
}
.toast.out { opacity: 0; transform: translateY(-6px) rotate(-1deg); transition: opacity .3s, transform .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px) scale(.92) rotate(-1deg); } to { opacity: 1; transform: rotate(-1deg); } }

/* ---- connection strip ---- */
#connBar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1400;
  background: var(--tram); border-bottom: var(--bw) solid var(--ink);
  color: #fff; font-size: 12.5px; font-weight: 800; text-align: center; padding: 6px;
  animation: fadein .3s;
}

/* ---- emote strip ---- */
#emoteStrip {
  position: absolute; left: 12px; bottom: 146px; z-index: 900;
  display: flex; gap: 7px; flex-wrap: wrap; max-width: 92vw;
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r);
  padding: 8px; box-shadow: var(--sh);
  animation: fadein .15s;
}
.emote-btn {
  width: 44px; height: 44px; padding: 0; border-radius: var(--r-sm);
  border: 2.5px solid var(--ink); background: #fff; font-size: 21px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-xs);
  transition: transform .08s, box-shadow .08s;
}
.emote-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

/* ---- spawn flag ---- */
.spawn-flag { font-size: 17px; white-space: nowrap; filter: drop-shadow(2px 2px 0 rgba(29,27,22,.2)); }
.spawn-flag .fl-name, .spawn-flag .fl-count {
  font-size: 10px; font-weight: 800; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink);
  padding: 1px 7px; border-radius: 7px; margin-left: 3px; vertical-align: 3px;
  box-shadow: var(--sh-xs);
}
.spawn-flag .fl-count { margin-left: -5px; color: var(--sea); border-radius: 0 7px 7px 0; border-left: none; padding-left: 4px; }
.spawn-flag .fl-name:has(+ .fl-count:not(:empty)) { border-radius: 7px 0 0 7px; }

/* ---- bottom dock ---- */
#dock {
  position: absolute; z-index: 920; left: 12px; right: 12px; bottom: 14px;
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 18px;
  box-shadow: 5px 5px 0 var(--ink);
  display: none; align-items: center; justify-content: space-around; padding: 8px 10px;
}
#dock.active { display: flex; }
.d-item {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font: inherit; font-size: 10px; font-weight: 800; color: var(--txt3);
  background: none; border: none; cursor: pointer; width: 58px; position: relative; padding: 2px 0;
}
.d-item svg { width: 24px; height: 24px; stroke: var(--txt3); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.d-item svg .fdot { fill: var(--txt3); stroke: none; }
.d-item.on { color: var(--ink); }
.d-item.on svg { stroke: var(--ink); }
.d-item.on svg .fdot { fill: var(--ink); }
.d-item.on:before {
  content: ''; position: absolute; top: -8px; width: 26px; height: 5px;
  border-radius: 0 0 5px 5px; background: var(--taxi); border: 2px solid var(--ink); border-top: none;
}
.d-badge {
  position: absolute; top: -4px; right: 8px; min-width: 17px; height: 17px;
  border-radius: 6px; background: var(--tram); border: 2px solid var(--ink);
  color: #fff; font-size: 9.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
#dockEmote {
  width: 54px; height: 54px; background: var(--taxi); border: var(--bw) solid var(--ink);
  border-radius: 16px; box-shadow: var(--sh); margin-top: -24px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transform: rotate(-3deg); padding: 0;
  transition: transform .08s, box-shadow .08s;
}
#dockEmote svg { width: 28px; height: 28px; }
#dockEmote:active { transform: rotate(-3deg) translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }

/* ---- joystick (mobile only) ---- */
#joyZone {
  position: absolute; inset: 0;
  z-index: 850; display: none;
}
body.mobile #joyZone { display: block; }
body.mobile #chatLog { width: min(85vw, 340px); }

/* ---- araç blokları (profil panelinde) ---- */
#menuVeh { display: flex; gap: 8px; }
.veh-btn {
  flex: 1; min-height: 46px; padding: 0; border-radius: var(--r-sm);
  border: var(--bw) solid var(--ink); background: #fff; color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-xs);
  transition: transform .08s, box-shadow .08s;
}
.veh-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.veh-btn.sel { background: var(--ink); }

/* ---- my panel ---- */
#myHead { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
#myAv { margin: 0; flex: 0 0 auto; width: 58px; height: 58px; font-size: 24px; }
#myHeadTxt { text-align: left; }
#myName { font-size: 17px; font-weight: 800; }
#myBadge { font-size: 12.5px; color: #b8860b; font-weight: 800; margin-top: 1px; }
#myTabs { display: flex; gap: 6px; margin-bottom: 13px; }
.mtab {
  flex: 1; padding: 8px 0; border-radius: var(--r-sm); border: 2.5px solid var(--ink);
  background: #fff; color: var(--txt2); font: inherit; font-size: 12.5px; font-weight: 800;
  cursor: pointer; box-shadow: var(--sh-xs); transition: transform .06s;
}
.mtab.sel { background: var(--ink); color: var(--taxi); }
.mbody { display: flex; flex-direction: column; gap: 9px; text-align: left; }
.me-row {
  display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--txt2); font-weight: 700;
  padding: 8px 2px; border-bottom: 2px dashed var(--line);
}
.me-row b { margin-left: auto; color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.me-row button {
  padding: 4px 11px; border-radius: 7px; border: 2.5px solid var(--ink);
  background: var(--taxi); color: var(--ink); font: inherit; font-size: 11.5px; font-weight: 800;
  cursor: pointer; box-shadow: var(--sh-xs);
}
.me-sep { height: 4px; }
#meLogout {
  margin-top: 2px; padding: 11px; border-radius: var(--r-sm); cursor: pointer;
  background: #fff; border: 2.5px solid var(--ink); color: var(--tram);
  font: inherit; font-size: 13.5px; font-weight: 800; box-shadow: var(--sh-xs);
}
#meCta { margin-top: 6px; font-size: 13px; color: var(--txt2); text-align: center; font-weight: 700; }

/* ---- friends / blocks ---- */
.fr-row { display: flex; align-items: center; gap: 9px; padding: 9px 2px; border-bottom: 2px dashed var(--line); }
.fr-dot { width: 10px; height: 10px; border-radius: 4px; background: #cfc9bb; border: 2px solid var(--ink); flex: 0 0 auto; }
.fr-dot.on { background: var(--grass); }
.fr-name { font-size: 14.5px; color: var(--ink); font-weight: 700; }
.fr-status { margin-left: auto; font-size: 11.5px; color: var(--txt3); font-weight: 700; }
.fr-ok, .fr-no {
  width: 34px; height: 34px; border-radius: 9px; border: 2.5px solid var(--ink);
  background: #fff; cursor: pointer; font: inherit; font-size: 15px; font-weight: 800; line-height: 1;
  box-shadow: var(--sh-xs);
}
.fr-ok { color: var(--grass); margin-left: auto; }
.fr-no { color: var(--tram); }
.fr-row .fr-ok + .fr-no { margin-left: 0; }
.fr-empty { font-size: 13px; color: var(--txt3); padding: 10px 2px; font-weight: 600; }
#frBadge, #msgBadge {
  display: inline-flex; margin-left: 5px; min-width: 15px; height: 15px; border-radius: 6px;
  background: var(--tram); color: #fff; font-size: 9px; font-weight: 800;
  align-items: center; justify-content: center; vertical-align: 2px; padding: 0 3px;
  border: 2px solid var(--ink);
}
#msgBadge { background: var(--sea); }

/* ---- pm inbox ---- */
.fr-row.conv { cursor: pointer; }
.fr-row.conv:hover { background: rgba(29,27,22,.04); }
.conv-last { margin-left: auto; font-size: 11.5px; color: var(--txt3); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.conv-unread {
  min-width: 18px; height: 18px; border-radius: 7px; background: var(--sea); color: #fff;
  border: 2px solid var(--ink); font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
#pmThreadHead { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 2px dashed var(--line); font-weight: 800; }
#pmBack { cursor: pointer; color: var(--txt2); font-size: 18px; padding: 2px 6px; font-weight: 800; }
#pmMsgs { max-height: 38vh; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 10px 2px; }
.pm-bubble {
  max-width: 78%; padding: 8px 12px; border-radius: 11px 11px 11px 3px;
  background: #fff; border: 2.5px solid var(--ink); color: var(--ink); box-shadow: var(--sh-xs);
  font-size: 13.5px; font-weight: 600; word-break: break-word; align-self: flex-start;
}
.pm-bubble.mine { align-self: flex-end; border-radius: 11px 11px 3px 11px; background: var(--note); }
#pmSendRow { display: flex; gap: 8px; }
#pmSendRow input { flex: 1; }
#pmSendRow button {
  flex: 0 0 48px; border-radius: var(--r-sm); border: var(--bw) solid var(--ink); cursor: pointer;
  background: var(--taxi); color: var(--ink); font-size: 16px; font-weight: 800; box-shadow: var(--sh-xs);
}

/* ---- avatar upload row ---- */
#imgRow { display: flex; gap: 8px; }
#imgUpBtn, #imgDelBtn {
  flex: 1; min-height: 44px; padding: 10px; border-radius: var(--r-sm);
  border: 2.5px solid var(--ink); background: #fff; color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: var(--sh-xs);
}
#imgDelBtn { flex: 0 0 auto; color: var(--tram); }

/* ---- openmoji + parçacıklar + mağaza grid + gönder ---- */
.emote-btn img, .veh-btn img { pointer-events: none; }
.emote img { display: block; }
.coin-ico { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }
.fl-ico { width: 20px; height: 20px; vertical-align: -4px; }

.burst { position: absolute; left: 50%; top: 0; width: 0; height: 0; pointer-events: none; z-index: 5; }
.burst i {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  border: 2px solid var(--ink); border-radius: 2px;
  animation: burstFly .7s ease-out forwards;
}
@keyframes burstFly {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rr)) scale(1); }
}

.shop-bal {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px;
  background: var(--note); border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 4px 13px; font-weight: 700; font-size: 13px; box-shadow: var(--sh-xs);
}
.shop-bal img { width: 17px; height: 17px; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shop-card {
  background: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r);
  box-shadow: var(--sh-sm); padding: 14px 12px 12px; text-align: center;
}
.shop-card.owned { background: var(--page); }
.shop-prev {
  width: 46px; height: 46px; margin: 0 auto 8px; position: relative;
  border: var(--bw) solid var(--ink); border-radius: 13px; box-shadow: var(--sh-xs);
  transform: rotate(-3deg);
}
.shop-prev-color:after {
  content: ''; position: absolute; left: 8px; top: 12px; width: 8px; height: 8px;
  background: #fff; border-radius: 50%; border: 2px solid var(--ink);
  box-shadow: 15px 0 0 0 #fff, 15px 0 0 2px #1d1b16;
}
.shop-card .shop-name { font-size: 13.5px; font-weight: 800; margin-bottom: 9px; }
.shop-card button {
  width: 100%; padding: 8px; border-radius: var(--r-sm); border: 2.5px solid var(--ink);
  cursor: pointer; background: var(--taxi); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 800; box-shadow: var(--sh-xs);
  transition: transform .06s, box-shadow .06s;
}
.shop-card button:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.shop-card button:disabled { background: #fff; color: var(--grass); box-shadow: none; cursor: default; }

#chatForm.active { display: flex; gap: 8px; }
#chatInput { flex: 1; width: auto; max-width: none; }
#chatSend {
  flex: 0 0 48px; height: 48px; border-radius: var(--r-sm); border: var(--bw) solid var(--ink);
  cursor: pointer; background: var(--taxi); box-shadow: var(--sh-sm); padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .06s, box-shadow .06s;
}
#chatSend:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
#chatSend svg { width: 22px; height: 22px; }

/* bayraklar vb. etkileşimsiz markerlar dokunuşu yutmasın */
.leaflet-marker-icon:not(.leaflet-interactive) { pointer-events: none; }

/* ---- buton ikonları (OpenMoji) ---- */
.btn-ico { width: 17px; height: 17px; vertical-align: -3px; pointer-events: none; }
#reportBtn .btn-ico, #blockBtn .btn-ico { width: 20px; height: 20px; vertical-align: -5px; }
#premBadge .btn-ico { width: 16px; height: 16px; vertical-align: -3px; }

/* ---- mobil chat %10 küçük ---- */
body.mobile .chat-line { font-size: 11.5px; padding: 3px 8px; border-width: 2px; }
body.mobile #chatLog { bottom: 138px; gap: 5px; }
body.mobile #chatInput { font-size: 13.5px; padding: 9px 12px; }
body.mobile #chatSend { flex: 0 0 42px; height: 42px; }
body.mobile #chatSend svg { width: 19px; height: 19px; }
body.mobile #emoteStrip { bottom: 136px; }

/* çift-dokunuş sayfa zoom'una karşı: oyun yüzeyleri none, UI manipulation */
.leaflet-container, #joyZone { touch-action: none; }
button, a, input, .swatch, .chip { touch-action: manipulation; }

/* ---- gardırop ---- */
.ward-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ward-btn { position: relative; }
.ward-ico { width: 30px; height: 22px; display: block; }
.ward-ico svg { width: 100%; height: 100%; display: block; }
.ward-swatch { width: 20px; height: 20px; border-radius: 50%; display: block; border: 2.5px solid var(--ink); }
.ward-none { font-size: 18px; font-weight: 800; line-height: 24px; color: var(--txt2); }
.veh-btn.sel .ward-none { color: var(--paper); }
.ward-locked { position: relative; display: block; opacity: .45; }
.ward-lock { position: absolute; right: -7px; bottom: -7px; font-size: 12px; opacity: 1; }
.ward-note { font-size: 12.5px; color: var(--txt2); font-style: italic; padding: 2px 0 6px; }

/* şapka: tacın kardeşi — karakterin tepesine oturur */
.char-wrap .hat { display: none; position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(-5deg); width: 25px; height: 18px; z-index: 4; pointer-events: none; filter: drop-shadow(1.5px 1.5px 0 rgba(29,27,22,.4)); }
/* admin hem taç hem şapka takarsa taç yukarı kayar */
.char-wrap.is-admin.has-hat .crown { top: -26px; }

/* iz partikülü (overlay pane — karakterlerin altında): minik, yumuşak, kenarlıksız */
.trail-dot { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0;
  transform: translate(var(--tx), var(--ty)); animation: trailFade 1.3s ease-out forwards; }
@keyframes trailFade {
  0%   { opacity: 0;   transform: translate(var(--tx), var(--ty)) scale(.4); }
  12%  { opacity: .85; transform: translate(var(--tx), var(--ty)) scale(1); }
  100% { opacity: 0;   transform: translate(var(--tx), var(--ty)) scale(.5); }
}

/* iz sahibi karakterin etrafında belirgin aura (renk inline verilir) */
.char-wrap .aura {
  display: none; position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  opacity: .9; pointer-events: none;
  animation: auraPulse 2.2s ease-in-out infinite;
}
@keyframes auraPulse { 0%, 100% { scale: 1; opacity: .75; } 50% { scale: 1.18; opacity: 1; } }
body.mobile .char-wrap .aura { width: 46px; height: 46px; margin: -23px 0 0 -23px; }

/* ---- admin tacı ---- */
.char-wrap .crown {
  display: none; position: absolute; top: -15px; left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  width: 18px; height: 14px; z-index: 4; pointer-events: none;
  filter: drop-shadow(1.5px 1.5px 0 rgba(29,27,22,.4));
}
.char-wrap .crown svg, .char-wrap .hat svg { width: 100%; height: 100%; display: block; }
.char-wrap.is-admin .crown { display: block; }


/* ---- karakter düzenleme ekranı ---- */
#charEditor { display: flex; gap: 14px; align-items: flex-start; }
#charPrevBox { flex: 0 0 118px; background: var(--paper); border: 3px solid var(--ink);
  border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); padding: 14px 8px 10px; text-align: center; }
#charPrevStage { position: relative; width: 78px; height: 96px; margin: 0 auto; }
#charPrevAura { display: none; position: absolute; left: 50%; top: 58px; width: 108px; height: 108px;
  margin: -54px 0 0 -54px; border-radius: 50%; animation: auraPulse 2.2s ease-in-out infinite; }
#charPrevBody { position: absolute; left: 50%; top: 58px; width: 66px; height: 66px; margin: -33px 0 0 -33px;
  border-radius: 21px; border: 6px solid var(--ink); box-sizing: border-box; box-shadow: 5px 5px 0 rgba(29,27,22,.25); }
.cp-eye { position: absolute; top: 16px; width: 8px; height: 8px; background: var(--ink); border-radius: 50%; }
.cp-eye.l { left: 13px; } .cp-eye.r { left: 33px; }
#charPrevBody.member .cp-eye { width: 15px; height: 15px; top: 12px; background: #fff; border: 4px solid var(--ink); }
#charPrevBody.member .cp-eye.l { left: 6px; } #charPrevBody.member .cp-eye.r { left: 29px; }
#charPrevHat { display: none; position: absolute; left: 50%; top: -4px; transform: translateX(-50%) rotate(-5deg);
  width: 62px; height: 44px; z-index: 3; filter: drop-shadow(3px 3px 0 rgba(29,27,22,.3)); }
#charPrevHat svg { width: 100%; height: 100%; display: block; }
#charPrevName { margin-top: 8px; font-weight: 800; font-size: 13px; background: var(--ink); color: var(--taxi);
  border-radius: 8px; padding: 2px 6px; display: inline-block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#charSide { flex: 1; min-width: 0; }
#charCats { display: flex; gap: 6px; margin-bottom: 10px; }
.cchip { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 10px; padding: 5px 12px;
  font-weight: 800; font-size: 13px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); font-family: inherit; }
.cchip.sel { background: var(--ink); color: var(--taxi); }
.cchip:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
#palette2 { display: flex; flex-wrap: wrap; gap: 8px; }
#palette2 .swatch { width: 30px; height: 30px; }

/* ---- sosyal panel ---- */
#socialPanel { position: fixed; inset: 0; z-index: 1200; background: rgba(29,27,22,.35); display: flex; align-items: center; justify-content: center; }
#socialPanel.hidden { display: none; }
#myTabsSoc { display: flex; gap: 6px; margin-bottom: 12px; }
.stab { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 10px; padding: 6px 14px;
  font-weight: 800; font-size: 13.5px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); font-family: inherit; position: relative; }
.stab.sel { background: var(--ink); color: var(--taxi); }
#socClose { position: absolute; top: 10px; right: 12px; background: var(--paper); border: 2.5px solid var(--ink);
  border-radius: 9px; width: 32px; height: 32px; font-size: 18px; font-weight: 800; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); z-index: 2; }
#frBadge, #msgBadge { background: #e2372b; color: #fff; border-radius: 8px; font-size: 10.5px;
  padding: 1px 5px; margin-left: 5px; vertical-align: 1px; }

/* ---- araç seçici (ana ekran) ---- */
#vehFab { position: fixed; right: 12px; bottom: 92px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#vehFab.hidden { display: none; }
#vehFabBtn { width: 48px; height: 48px; border-radius: 14px; background: var(--paper); border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
#vehFabBtn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
#vehFabBtn img { width: 30px; height: 30px; }
#vehMenu { display: flex; flex-direction: column; gap: 8px; }
#vehMenu.hidden { display: none; }
.vopt { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 3px solid var(--ink);
  border-radius: 13px; padding: 7px 12px; font-weight: 800; font-size: 13px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink); font-family: inherit; }
.vopt img { width: 24px; height: 24px; }
.vopt.sel { background: var(--taxi); }
.vopt.locked { opacity: .55; }
.vopt .vlock { font-size: 11.5px; color: var(--txt2); font-weight: 700; }
body.mobile #vehFab { bottom: 92px; right: 10px; }
body.mobile #chatForm { right: 64px; }
body.mobile #vehFabBtn { width: 46px; height: 46px; }
body.mobile #charEditor { gap: 10px; }
body.mobile #charPrevBox { flex-basis: 104px; }

.shop-prev-hat { display: flex; align-items: center; justify-content: center; }
.shop-prev-hat svg { width: 88%; height: 88%; }

/* gardırop butonları esnemesin; seçilide koyu şapkalar görünür kalsın */
.ward-btn { flex: 0 0 auto; min-width: 52px; }
.veh-btn.sel.ward-btn { background: var(--taxi); }

/* ---- mağaza polish ---- */
.shop-tabs { display: flex; gap: 8px; margin: 12px 0 6px; }
.sh-tab { flex: 1; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 11px;
  padding: 8px 6px; font-weight: 800; font-size: 13px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink);
  font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 5px; }
.sh-tab.sel { background: var(--ink); color: var(--taxi); }
.sh-tab .prem-badge svg { width: 17px; height: 15px; display: block; }
.prem-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: #2f7fbe; }
.prem-badge svg { width: 16px; height: 14px; vertical-align: -2px; }
.shop-prev-trail { border-radius: 50%; }
.shop-prev-trail::before, .shop-prev-trail::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--tc, #fff); opacity: 0;
}
.shop-prev-trail::after { animation: shopTrail 1.3s ease-out infinite; }
.shop-prev-trail::before { animation: shopTrail2 1.3s .65s ease-out infinite; }
@keyframes shopTrail  { 0% { transform: translate(0,0) scale(1); opacity: .95; } 100% { transform: translate(-19px,15px) scale(.4); opacity: 0; } }
@keyframes shopTrail2 { 0% { transform: translate(0,0) scale(1); opacity: .95; } 100% { transform: translate(-23px,7px) scale(.4); opacity: 0; } }
.cash-prem { position: relative; background: linear-gradient(0deg, #eaf5ff, #eaf5ff), var(--paper);
  border: 3px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink);
  padding: 16px 14px 14px; text-align: center; margin-top: 12px; }
.cash-prem-ico svg { width: 52px; height: 46px; }
.cash-prem-tit { font-weight: 800; font-size: 18px; margin-top: 2px; }
.cash-prem-list { font-size: 12.5px; color: var(--txt2); font-weight: 600; margin: 4px 0 10px; }
.cash-buy { background: var(--taxi); border: 3px solid var(--ink); border-radius: 12px; padding: 9px 22px;
  font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); font-family: inherit; }
.cash-buy:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.cash-pack { position: relative; overflow: visible; }
.pack-rib { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  background: var(--tram); color: #fff; border: 2px solid var(--ink); border-radius: 7px;
  font-size: 9px; font-weight: 800; padding: 2px 7px; letter-spacing: .5px; white-space: nowrap; z-index: 2; }
.pack-prev { display: flex; align-items: center; justify-content: center; }
.pack-prev img { width: 26px; height: 26px; }
.pack-prev.s2 img { margin-left: -9px; } .pack-prev.s2 img:first-child { margin-left: 0; }
.pack-prev.s3 img { width: 24px; height: 24px; margin-left: -10px; } .pack-prev.s3 img:first-child { margin-left: 0; }
.cash-note { font-size: 11.5px; color: var(--txt3); font-weight: 600; text-align: center; margin-top: 12px; font-style: italic; }
/* özel renkler bölümü */
.pal-row { display: flex; flex-wrap: wrap; gap: 8px; }
#palette2 .menu-label { width: 100%; margin: 12px 2px 2px; }
.swatch.locked { opacity: .5; position: relative; }
.swatch.locked:after { content: ''; position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px;
  background: url('/emoji/1F512.svg') center/contain no-repeat; }
/* araç svg ikonları */
.veh-svg { display: inline-flex; align-items: center; }
.veh-svg svg { height: 100%; width: auto; display: block; }

/* görevler: sağ üstte paranın altında */
#questBtn { position: absolute; top: 66px; right: 12px; z-index: 900;
  width: 44px; height: 44px; border-radius: 13px; background: var(--paper);
  border: var(--bw) solid var(--ink); box-shadow: var(--sh-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transform: rotate(2deg); }
#questBtn svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2.2; }
#questBtn svg .fdot { fill: var(--tram); stroke: none; }
#questBtn:active { transform: rotate(2deg) translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
body.mobile #questBtn { top: 88px; }
/* coin mağazası kategori sekmeleri */
.shop-cats { display: flex; gap: 8px; margin: 14px 0 12px; flex-wrap: wrap; justify-content: center; }

/* premium kartı ışıltıları */
.prem-stage { position: relative; display: inline-block; }
.spark { position: absolute; width: 12px; height: 12px; opacity: 0; pointer-events: none;
  animation: sparkle 2.4s ease-in-out infinite; }
.spark svg { width: 100%; height: 100%; display: block; }
.spark.s1 { left: -18px; top: 4px; animation-delay: 0s; }
.spark.s2 { right: -20px; top: 10px; animation-delay: .6s; }
.spark.s3 { left: -8px; top: -10px; animation-delay: 1.2s; width: 9px; height: 9px; }
.spark.s4 { right: -6px; top: -12px; animation-delay: 1.8s; }
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(25deg); }
}


/* ---- kaplama araçları (vslot) ---- */
.char .vslot { display: none; }
.char.veh-skin .vslot { display: block; width: 100%; height: 100%; }
.char.veh-skin .v-car, .char.veh-skin .v-f1 { display: none !important; }
.vslot svg { width: 100%; height: 100%; display: block; filter: drop-shadow(2px 2px 0 rgba(29,27,22,.35)); }
/* polis tepe lambası: kırmızı/mavi dönüşümlü */
.sk-police .plight.l { animation: pblink 0.8s steps(1) infinite; }
.sk-police .plight.r { animation: pblink 0.8s steps(1) .4s infinite; }
@keyframes pblink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .18; } }
/* UFO: çevre ışıkları sırayla yanar + havada süzülme */
.sk-ufo { animation: ubob 2.6s ease-in-out infinite; }
@keyframes ubob { 0%, 100% { transform: translateY(0) scale(1.35); } 50% { transform: translateY(-2.5px) scale(1.35); } }
.sk-ufo .u-l { animation: ulight 1.5s steps(1) infinite; }
.sk-ufo .u2 { animation-delay: .25s; } .sk-ufo .u3 { animation-delay: .5s; }
.sk-ufo .u4 { animation-delay: .75s; } .sk-ufo .u5 { animation-delay: 1s; } .sk-ufo .u6 { animation-delay: 1.25s; }
@keyframes ulight { 0%, 30% { opacity: 1; } 31%, 100% { opacity: .25; } }
/* Roket: alev titrer */
.sk-rocket .r-flame { animation: rflame .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes rflame { 0% { transform: scaleY(.75); opacity: .85; } 100% { transform: scaleY(1.15); opacity: 1; } }

/* ---- admin epic görünüm ---- */
.char-wrap.is-admin .char { outline: 3px solid var(--taxi); outline-offset: 2px;
  animation: adminPulse 2s ease-in-out infinite; }
@keyframes adminPulse { 0%, 100% { outline-color: var(--taxi); } 50% { outline-color: #fff2b8; } }
/* admin gözleri: SVG katmanı (.aeyes) — iki özdeş altın daire + ışık noktası.
   CSS :after gözü adminde tamamen kapalı; yön --ex/--ey aynı şekilde uygulanır. */
.char-wrap.is-admin .char:not(.veh-car):not(.veh-sport):after { display: none !important; }
.char .aeyes { position: absolute; inset: 0; pointer-events: none;
  transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform .22s ease-out; }
.char .aeyes svg { width: 100%; height: 100%; display: block; }
/* admin yayası: normalden %10 büyük kare */
.char.admin-big { width: 30px !important; height: 30px !important; border-radius: 10px; }
.char-wrap.is-admin .crown { width: 24px; height: 18px; top: -14px;
  transform: translateX(-50%) rotate(0deg); }   /* tabanı gövdeye oturur, düz durur */
.char-wrap.is-admin .crown:after { content: ''; position: absolute; right: -6px; top: -3px; width: 8px; height: 8px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M6 0 L7.3 4.7 12 6 7.3 7.3 6 12 4.7 7.3 0 6 4.7 4.7z" fill="%23ffc800" stroke="%231d1b16"/></svg>') center/contain no-repeat;
  animation: sparkle 2.2s ease-in-out infinite; }
.char-wrap.is-admin .nick { background: #c22f21; color: #ffd76e; }

/* ---- mağaza: sabit başlık + kaydırılabilir gövde ---- */
#panelModal .pm-panel { display: flex; flex-direction: column; overflow: hidden; }
#pmlHead { flex: 0 0 auto; }
#pmlBody { overflow-y: auto; min-height: 0; padding-right: 4px; }
#pmlBody::-webkit-scrollbar { width: 6px; }
#pmlBody::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* ---- satın alma onayı ---- */
#buyConfirm { position: fixed; inset: 0; z-index: 1600; background: rgba(29,27,22,.45);
  display: flex; align-items: center; justify-content: center; }
.buy-box { background: var(--paper); border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: 5px 5px 0 var(--ink); padding: 20px 22px; text-align: center; width: min(80vw, 260px); }
.buy-tit { font-weight: 800; font-size: 17px; }
.buy-price { font-weight: 800; font-size: 14px; color: var(--txt2); margin: 6px 0 14px; }
.buy-price img { width: 16px; height: 16px; vertical-align: -3px; }
.buy-row { display: flex; gap: 10px; }
.buy-row button { flex: 1; padding: 10px; border-radius: 11px; border: 2.5px solid var(--ink);
  font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.buy-no { background: var(--paper); }
.buy-yes { background: var(--taxi); }
.buy-row button:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }

/* ---- özel emote animasyonları ---- */
.cemote { position: absolute; left: 50%; top: -4px; width: 0; z-index: 6; pointer-events: none; }
.cemote .cem-p { position: absolute; opacity: 0; animation: cemUp 1.7s ease-out forwards; }
.cem-p { display: inline-block; }
.cem-p svg { width: 100%; height: 100%; display: block; filter: drop-shadow(1px 1px 0 rgba(29,27,22,.25)); }
@keyframes cemUp {
  0%   { opacity: 0; transform: translateY(6px) scale(.4); }
  18%  { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-42px) scale(.75); }
}
.cem-spin { animation-name: cemSpin !important; }
@keyframes cemSpin {
  0%   { opacity: 0; transform: translateY(6px) rotate(0deg) scale(.4); }
  18%  { opacity: 1; transform: translateY(-6px) rotate(90deg) scale(1); }
  100% { opacity: 0; transform: translateY(-42px) rotate(360deg) scale(.75); }
}
.emote-btn.em-custom { outline: 2.5px solid var(--taxi); outline-offset: -1px; border-radius: 10px; }
/* mağaza önizlemeleri */
.shop-prev-veh { display: flex; align-items: center; justify-content: center; }
.shop-prev-veh svg { width: 62%; height: 88%; }
.shop-prev-em { overflow: hidden; }   /* partiküller çerçeve İÇİNDE kalır */
.shop-prev-em .cem-p { position: absolute; bottom: -2px; opacity: 0; animation: cemInBox 1.6s ease-out infinite; }
@keyframes cemInBox {
  0%   { opacity: 0; transform: translateY(6px) scale(.4); }
  20%  { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateY(-26px) scale(.7); }
}

.emote-btn .cem-p { position: static; opacity: 1; animation: none; }
.emote-btn.em-custom .cem-p { animation: none; }

/* helikopter: dönen pervane */
.sk-heli .h-rotor { animation: hrotor .45s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes hrotor { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
/* uçan halı: salınarak süzülür */
.sk-carpet .c-body { animation: cwave 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes cwave { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(-2px); } }
/* konfeti karesi + müzik notası salınımı */
.cem-conf { border: 1.5px solid #1d1b16; border-radius: 2px; }
.cem-sway { animation-name: cemSway !important; }
@keyframes cemSway {
  0%   { opacity: 0; transform: translate(0, 6px) rotate(-8deg) scale(.5); }
  20%  { opacity: 1; transform: translate(4px, -8px) rotate(6deg) scale(1); }
  55%  { transform: translate(-4px, -24px) rotate(-6deg) scale(1); }
  100% { opacity: 0; transform: translate(3px, -44px) rotate(8deg) scale(.8); }
}
@keyframes adminGlow {
  0%, 100% { filter: drop-shadow(2px 2px 0 rgba(29,27,22,.35)) drop-shadow(0 0 4px rgba(255,200,0,.55)); }
  50%      { filter: drop-shadow(2px 2px 0 rgba(29,27,22,.35)) drop-shadow(0 0 9px rgba(255,200,0,.95)); }
}

/* helikopter: daha iri + pervane taşar */
.sk-heli { overflow: visible; transform: scale(1.18); }

/* ---- görev paneli polish ---- */
.q-head { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 12px; }
.q-sum { font-weight: 800; font-size: 14px; background: var(--ink); color: var(--taxi);
  border-radius: 9px; padding: 3px 10px; }
.q-cd { font-size: 12px; color: var(--txt2); font-weight: 700; }
.q-card { display: flex; align-items: center; gap: 11px; background: var(--paper);
  border: 2.5px solid var(--ink); border-radius: 13px; box-shadow: 2.5px 2.5px 0 var(--ink);
  padding: 10px 12px; margin-bottom: 10px; }
.q-card.done { background: #e9f7ee; }
.q-ico { flex: 0 0 34px; width: 34px; height: 34px; background: #fff; border: 2.5px solid var(--ink);
  border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.q-ico svg { width: 22px; height: 22px; }
.q-mid { flex: 1; min-width: 0; }
.q-name { font-size: 13px; font-weight: 800; margin-bottom: 5px; }
.q-card.done .q-name { color: var(--grass); }
.q-progress { font-size: 11px; color: var(--txt2); font-weight: 700; margin-top: 4px; }
.q-card.done .q-progress { color: var(--grass); }
.q-side { flex: 0 0 auto; display: flex; align-items: center; gap: 3px; font-weight: 800; font-size: 13px; }
.q-side img { width: 17px; height: 17px; }
.q-side svg { width: 26px; height: 26px; }
.q-card .quest-bar { height: 10px; }
.q-card .quest-bar div { transition: width .7s ease-out; }

/* vespa farı yumuşak parlar; cabrio arka parlaması süzülür */
.sk-vespa .v-lite { animation: vlite 1.6s ease-in-out infinite; }
@keyframes vlite { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.sk-cabrio .c-shine { animation: cshine 2.6s ease-in-out infinite; }
@keyframes cshine { 0%, 100% { opacity: 0; } 50% { opacity: .75; } }

/* rapor/engel: kartın altında küçük soluk linkler */
#profDanger { display: flex; gap: 16px; justify-content: center; margin-top: 13px;
  padding-top: 10px; border-top: 2px dashed var(--line); }
#profDanger a { font-size: 12px; font-weight: 700; color: var(--txt3); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; }
#profDanger a img { width: 13px; height: 13px; opacity: .6; }
#profDanger a:hover { color: var(--tram); }
#profDanger a:hover img { opacity: 1; }
/* genel onay penceresi */
.ask-ov { position: fixed; inset: 0; z-index: 1600; background: rgba(29,27,22,.45);
  display: flex; align-items: center; justify-content: center; }
.ask-desc { font-size: 12.5px; color: var(--txt2); font-weight: 600; margin: 6px 0 12px; line-height: 1.4; }
.ask-inp { width: 100%; padding: 10px 12px; border-radius: 10px; border: 2.5px solid var(--ink);
  font: inherit; font-weight: 600; font-size: 14px; margin-bottom: 14px; outline: none; }
.ask-inp.err { border-color: var(--tram); box-shadow: 0 0 0 3px rgba(226,55,43,.25); }
.buy-yes.danger { background: var(--tram); color: #fff; }

/* şapka türüne özel oturtma: kutu boyu + baş üstü mesafesi tek tek ayarlı */
.char-wrap .hat.h-1F9E2  { width: 24px; height: 18px; top: -13px; }   /* kep */
.char-wrap .hat.h-1F452  { width: 27px; height: 18px; top: -12px; }   /* hasır */
.char-wrap .hat.h-1F393  { width: 26px; height: 19px; top: -15px; }   /* mezuniyet */
.char-wrap .hat.h-1F3A9  { width: 22px; height: 21px; top: -16px; }   /* silindir */
.char-wrap .hat.h-flower { width: 31px; height: 16px; top: -10px; }    /* çiçek tacı: banda gibi oturur */
.char-wrap .hat.h-bow    { width: 22px; height: 15px; top: -10px; }   /* fiyonk: kulak gibi değer */
/* önizleme (62x44 sahne) için oranlı karşılıklar */
#charPrevHat.h-flower { width: 64px; height: 32px; top: 6px; }
#charPrevHat.h-bow    { width: 54px; height: 36px; top: 0; }
#charPrevHat.h-1F9E2  { width: 58px; height: 44px; top: -2px; }
#charPrevHat.h-1F452  { width: 66px; height: 44px; top: -2px; }
#charPrevHat.h-1F3A9  { width: 52px; height: 50px; top: -10px; }
.me-danger { width: 100%; margin-top: 8px; padding: 9px; border-radius: var(--r-sm);
  border: 2.5px solid var(--tram); background: #fff; color: var(--tram);
  font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.me-danger:hover { background: var(--tram); color: #fff; }

/* çerez izin bandı */
#consentBar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 2000;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--ink); padding: 12px 14px; display: flex; gap: 10px;
  align-items: center; font-size: 13px; font-weight: 600; flex-wrap: wrap; }
#consentBar span { flex: 1; min-width: 180px; }
#consentBar a { color: var(--sea); font-weight: 800; }
#consentBar button { border: 2.5px solid var(--ink); border-radius: 10px; padding: 8px 16px;
  font: inherit; font-weight: 800; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
#consentBar .cb-ok { background: var(--taxi); }
#consentBar .cb-no { background: var(--paper); }
.cash-buy.owned { background: #e9f7ee; color: var(--grass); cursor: default; box-shadow: none; }

/* beta rozeti: wordmark'ın sağ üst köşesine iliştirilmiş etiket */
.wordmark { position: relative; }
.wordmark .beta-tag { position: absolute; top: -24px; right: -26px; width: auto; height: auto;
  display: inline-block; background: var(--tram); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: 1.5px; padding: 2px 9px; border: 2.5px solid var(--ink);
  border-radius: 8px; transform: rotate(8deg); box-shadow: 2px 2px 0 var(--ink); }

/* admin paneli butonu: görevlerin altında, kırmızı kalkan */
#admBtn { position: absolute; top: 170px; right: 12px; z-index: 900;
  width: 44px; height: 44px; border-radius: 13px; background: #c22f21;
  border: var(--bw) solid var(--ink); box-shadow: var(--sh-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transform: rotate(-2deg); }
#admBtn svg { width: 24px; height: 24px; stroke: #ffd76e; stroke-width: 2.2; }
#admBtn:active { transform: rotate(-2deg) translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
body.mobile #admBtn { top: 192px; }
/* panel içi */
.adm-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.adm-chip { background: var(--ink); color: var(--taxi); border-radius: 9px; padding: 3px 11px; font-weight: 800; font-size: 13px; }
.adm-d { display: flex; justify-content: space-between; padding: 6px 4px; border-bottom: 2px dashed var(--line); font-weight: 700; font-size: 13.5px; }
.adm-d b { font-variant-numeric: tabular-nums; }
.adm-search { width: 100%; padding: 9px 12px; border: 2.5px solid var(--ink); border-radius: 10px;
  font: inherit; font-weight: 600; font-size: 13.5px; margin: 12px 0 8px; outline: none; }
.adm-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 2px dashed var(--line); }
.adm-name { flex: 1; min-width: 0; font-weight: 800; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-name small { display: block; font-weight: 600; color: var(--txt3); font-size: 10.5px; }
.adm-row button { border: 2px solid var(--ink); border-radius: 8px; background: var(--paper);
  font: inherit; font-weight: 800; font-size: 11px; padding: 4px 8px; cursor: pointer; box-shadow: 1.5px 1.5px 0 var(--ink); }
.adm-row button:active { transform: translate(1px,1px); box-shadow: 0 0 0 var(--ink); }
.adm-row button.danger { background: #ffe3df; color: #c22f21; }


/* ---- ilçe butonu + paneli ---- */
#distBtn { position: absolute; top: 118px; right: 12px; z-index: 900;
  width: 44px; height: 44px; border-radius: 13px; background: var(--paper);
  border: var(--bw) solid var(--ink); box-shadow: var(--sh-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transform: rotate(-2deg); }
#distBtn svg { width: 24px; height: 24px; stroke: var(--ink); stroke-width: 2.2; }
#distBtn:active { transform: rotate(-2deg) translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
body.mobile #distBtn { top: 140px; }
#distPanel { position: absolute; top: 118px; right: 66px; z-index: 910; width: 232px;
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 15px;
  box-shadow: var(--sh); padding: 11px 13px 9px; }
body.mobile #distPanel { top: 140px; }
.dist-head { font-weight: 800; font-size: 14.5px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dist-head button { border: none; background: none; font: inherit; font-size: 20px; font-weight: 800; cursor: pointer; color: var(--txt2); line-height: 1; }
.dist-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 2px dashed var(--line); }
.dist-row:last-child { border-bottom: none; }
.dist-nm { flex: 1; font-weight: 800; font-size: 13.5px; }
.dist-ct { font-weight: 700; font-size: 12.5px; color: var(--txt2); }
.dist-go { border: 2.5px solid var(--ink); border-radius: 9px; background: var(--taxi);
  font: inherit; font-size: 12px; font-weight: 800; padding: 4px 9px; cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink); }
.dist-go:active { transform: translate(2px,2px); box-shadow: none; }
.dist-go:disabled { opacity: .5; cursor: default; background: var(--paper); }
.dist-note { margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--txt3); text-align: center; }

/* ---- yoğun ilçe okları (ekran kenarı, yuvarlak rozet + dönen ok) ---- */
.crowd-arrow { position: fixed; z-index: 640; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%; background: var(--paper);
  border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer; user-select: none; text-align: center; }
.crowd-arrow .ca-nm { font-size: 9.5px; font-weight: 800; line-height: 1.1; max-width: 52px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crowd-arrow .ca-n { font-size: 10.5px; font-weight: 800; color: var(--sea); line-height: 1.2; }
.crowd-arrow .ca-a { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; }
.crowd-arrow .ca-a path { fill: var(--tram); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }

/* ---- çevrimdışı hayalet avatarlar ---- */
.leaflet-marker-icon.ghosted { cursor: pointer; }
.leaflet-marker-icon.ghosted .char-wrap { opacity: .5; filter: saturate(.45); }
.leaflet-marker-icon.ghosted .nick { opacity: .55; }
.leaflet-marker-icon.ghosted .char-wrap .zzz { display: block; }
.char-wrap .zzz { display: none; position: absolute; top: -17px; right: -13px;
  font-size: 11px; font-weight: 800; color: var(--ink); opacity: .85;
  animation: zzfloat 2.2s ease-in-out infinite; pointer-events: none; }
@keyframes zzfloat { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: .95; } }

/* ---- Kadıköy topu ⚽ ---- */
.ball-wrap { filter: drop-shadow(2px 3px 0 rgba(29,27,22,.25)); pointer-events: none; }
.ball-wrap .ball-rot { width: 26px; height: 26px; will-change: transform; }
.ball-wrap svg { display: block; }

/* ---- admin sekmeleri + dashboard + backlog ---- */
.adm-tabs { display: flex; gap: 7px; margin-bottom: 12px; }
.adm-tab { flex: 1; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--paper);
  font: inherit; font-size: 12.5px; font-weight: 800; padding: 6px 4px; cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink); }
.adm-tab.on { background: var(--taxi); }
.adm-tab:active { transform: translate(2px,2px); box-shadow: none; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.dash-table th { text-align: left; font-size: 10.5px; color: var(--txt3); text-transform: uppercase;
  letter-spacing: .4px; padding: 3px 4px; border-bottom: 2px solid var(--line); }
.dash-table td { padding: 4px; border-bottom: 2px dashed var(--line); }
.dash-table tr:last-child td { border-bottom: none; }
.dash-empty { font-size: 12.5px; font-weight: 700; color: var(--txt3); padding: 8px 2px 12px; }
.bl-add { display: flex; gap: 7px; margin-bottom: 10px; }
.bl-add .adm-search { flex: 1; margin: 0; }
.bl-add button { border: 2.5px solid var(--ink); border-radius: 10px; background: var(--sea); color: #fff;
  font: inherit; font-size: 13px; font-weight: 800; padding: 0 14px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.bl-add button:active { transform: translate(2px,2px); box-shadow: none; }
.bl-row { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border-bottom: 2px dashed var(--line); font-size: 13px; font-weight: 700; }
.bl-row span { flex: 1; }
.bl-row.done span { text-decoration: line-through; opacity: .5; }
.bl-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--sea); flex: none; }
.bl-row button { border: none; background: none; font: inherit; font-size: 17px; font-weight: 800;
  color: var(--txt3); cursor: pointer; line-height: 1; padding: 0 3px; }
.bl-row button:hover { color: var(--tram); }

/* ---- sohbet kaydı görünümü ---- */
.log-row { padding: 6px 2px; border-bottom: 2px dashed var(--line); font-size: 13px; font-weight: 600; }
.log-row small { display: block; font-size: 10.5px; color: var(--txt3); font-weight: 700; margin-bottom: 1px; }

/* ---- bakım modu ---- */
.panel .sub.maint { color: var(--tram); font-weight: 800; }

/* ---- toplanabilirler ✨ ---- */
.col-wrap { pointer-events: none; }
.col-obj { width: 22px; height: 22px; filter: drop-shadow(1.5px 2px 0 rgba(29,27,22,.25));
  animation: colPulse 1.6s ease-in-out infinite; }
@keyframes colPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.08); }
}
.col-obj.col-pop { animation: colPop .4s ease-out forwards; }
@keyframes colPop {
  0% { transform: scale(1); opacity: 1; }
  45% { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(.2) translateY(-24px); opacity: 0; }
}
.col-float { position: fixed; left: 50%; top: 38%; transform: translateX(-50%); z-index: 950;
  font-weight: 800; font-size: 16px; color: var(--ink); background: var(--paper);
  border: 2.5px solid var(--ink); border-radius: 11px; padding: 6px 13px;
  box-shadow: 3px 3px 0 var(--ink); pointer-events: none;
  animation: colFloat 1.4s ease-out forwards; }
@keyframes colFloat {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  15% { opacity: 1; transform: translateX(-50%) translateY(0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-26px); }
}

/* ---- sezon tier isim plakaları (S2) ---- */
.nick.tier-1 { border: 2px solid #b3763a !important; background: #f6e8d8; }
.nick.tier-2 { border: 2px solid #9aa2ad !important; background: #eef1f5; }
.nick.tier-3 { border: 2px solid #d8a200 !important; background: #fff3c4;
  box-shadow: 0 0 6px rgba(255,200,0,.55); }
.nick.tier-4 { border: 2px solid #35b3e8 !important; background: #e3f6ff;
  box-shadow: 0 0 8px rgba(53,179,232,.6); animation: tierGlow 2.2s ease-in-out infinite; }
.nick.tier-5 { border: 2px solid #e2372b !important; background: #ffe9e6;
  box-shadow: 0 0 9px rgba(226,55,43,.65); animation: tierGlow 1.8s ease-in-out infinite; }
@keyframes tierGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.22); } }

/* ---- koleksiyon defteri ---- */
.col-set-head { font-weight: 800; font-size: 15px; margin: 14px 0 1px; }
.col-set-head.done { color: #2e9e44; }
.col-set-sub { font-size: 11.5px; font-weight: 700; color: var(--txt3); margin-bottom: 7px; }
.col-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.col-cell { border: 2.5px solid var(--line); border-radius: 11px; background: #fff;
  padding: 7px 3px 5px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.col-cell.have { border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.col-cell.rare { background: #fff8e0; }
.col-cell.rare.have { border-color: #d8a200; box-shadow: 2px 2px 0 #d8a200; }
.col-cell .col-e { font-size: 21px; line-height: 1.15; }
.col-cell:not(.have) .col-e { opacity: .45; }
.col-cell .col-n { font-size: 9.5px; font-weight: 800; color: var(--txt2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* profil: koleksiyon butonu */
#colBtn { width: 100%; margin: 4px 0 8px; padding: 10px; border: 2.5px solid var(--ink);
  border-radius: 11px; background: var(--paper); font: inherit; font-size: 13.5px;
  font-weight: 800; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
#colBtn:active { transform: translate(2px,2px); box-shadow: none; }

/* ödül şapkaları oturtma (yeni şapka = fitting satırı!) */
.hat.h-simitci { width: 30px; height: 17px; top: -12px; }
.hat.h-marti { width: 26px; height: 19px; top: -15px; }
.hat.h-omuzkedi { width: 28px; height: 20px; top: -10px; left: 12px; }
.hat.h-seri30 { width: 27px; height: 18px; top: -14px; }

/* ---- etkinlik şeridi + kedi avı (S3) ---- */
#evBar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 920;
  display: none; align-items: center; gap: 8px; padding: 8px 15px;
  border: 3px solid var(--ink); border-radius: 13px; font-weight: 800; font-size: 13.5px;
  box-shadow: 3px 3px 0 var(--ink); cursor: pointer; white-space: nowrap; color: var(--ink); }
#evBar.soon { background: var(--paper); }
#evBar.on { background: var(--taxi); animation: evPulse 1.6s ease-in-out infinite; }
@keyframes evPulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.03); } }
#evBar .ev-ico { font-size: 17px; }
#evBar .ev-t { font-variant-numeric: tabular-nums; background: var(--ink); color: var(--taxi);
  border-radius: 8px; padding: 1px 8px; font-size: 12.5px; }
body.mobile #evBar { top: 58px; font-size: 12px; }
.evcat-wrap { pointer-events: none; }
.evcat { font-size: 20px; filter: drop-shadow(1.5px 2px 0 rgba(29,27,22,.3));
  animation: catBob 1.2s ease-in-out infinite; }
@keyframes catBob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
.crowd-arrow.ev { background: var(--taxi); animation: evPulse2 1.4s ease-in-out infinite; }
@keyframes evPulse2 { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }

/* ---- S3: saygı/rozet/panolar/Süleyman/buff ---- */
#respBtn { border: 2.5px solid var(--ink); border-radius: 11px; background: #fff;
  font: inherit; font-size: 13px; font-weight: 800; padding: 8px 10px; cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink); }
#respBtn:active { transform: translate(2px,2px); box-shadow: none; }
#profBadgeRow { display: flex; gap: 5px; justify-content: center; margin: 4px 0 2px; }
.badge-chip { font-size: 17px; border: 2px solid var(--ink); border-radius: 9px;
  background: var(--paper); padding: 2px 5px; box-shadow: 1.5px 1.5px 0 var(--ink); cursor: default; }
.pmini { width: 100%; margin: 0 0 8px; padding: 9px; border: 2.5px solid var(--ink);
  border-radius: 11px; background: var(--paper); font: inherit; font-size: 13px;
  font-weight: 800; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); text-align: left; }
.pmini:active { transform: translate(2px,2px); box-shadow: none; }
.vd-row { display: flex; align-items: center; gap: 8px; padding: 9px 4px;
  border-bottom: 2px dashed var(--line); }
.vd-row.ozel { background: #fff8e0; border-radius: 9px; padding: 9px 8px; }
.vd-info { flex: 1; display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.vd-info span { font-size: 12px; font-weight: 700; color: var(--txt2); }
.vd-info s { color: var(--txt3); }
#buffIcon { position: fixed; top: 66px; left: 76px; z-index: 900; display: none;
  border: 2.5px solid var(--ink); border-radius: 11px; background: #e3f6ff;
  font-weight: 800; font-size: 12px; padding: 6px 10px; box-shadow: 2px 2px 0 var(--ink); }
body.mobile #buffIcon { top: 92px; left: 76px; }
.vendor-wrap { cursor: pointer; }
.vendor-mk { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.vendor-mk .v-tent { font-size: 22px; filter: drop-shadow(1.5px 2px 0 rgba(29,27,22,.3)); }
.vendor-mk .v-tag { font-size: 9px; font-weight: 800; background: var(--taxi);
  border: 2px solid var(--ink); border-radius: 7px; padding: 1px 4px; margin-top: -2px; }

/* ---- S4: hava katmanı + tier aura + efsanevi ---- */
#wxLayer { position: fixed; inset: 0; pointer-events: none; z-index: 610; overflow: hidden; }
#wxLayer i { position: absolute; top: -8%; display: none; }
#wxLayer.wx-rain i { display: block; width: 2.5px; height: 16px; background: rgba(44,111,214,.5);
  border-radius: 2px; animation: wxRain linear infinite; }
@keyframes wxRain { to { transform: translateY(115vh) translateX(-30px); } }
#wxLayer.wx-snow i { display: block; width: 7px; height: 7px; background: #fff;
  border: 1.5px solid rgba(29,27,22,.25); border-radius: 50%; animation: wxSnow linear infinite; }
@keyframes wxSnow { to { transform: translateY(115vh) translateX(24px); } }
#wxLayer.wx-hot { background: radial-gradient(ellipse at top, rgba(255,180,60,.13), transparent 60%); }
#wxChip { position: fixed; top: 66px; left: 12px; z-index: 900; display: none;
  border: 2.5px solid var(--ink); border-radius: 11px; background: var(--paper);
  font-weight: 800; font-size: 12px; padding: 6px 9px; box-shadow: 2px 2px 0 var(--ink); }
body.mobile #wxChip { top: 92px; }
.char-wrap.tier-aura { filter: drop-shadow(0 0 7px rgba(53,179,232,.85)); }
.char-wrap.tier-entry::before { content: ''; position: absolute; left: 50%; top: -70px;
  width: 5px; height: 70px; transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgba(255,200,0,.95));
  animation: entryBeam 1.5s ease-out forwards; pointer-events: none; }
@keyframes entryBeam { 0% { opacity: 1; height: 90px; } 80% { opacity: 1; } 100% { opacity: 0; } }
.nick.tier-5::before { content: '⭐ '; }
.col-cell.legend { background: #ffeef7; }
.col-cell.legend.have { border-color: #d34fa0; box-shadow: 2px 2px 0 #d34fa0; }
.hat.h-semsiye { width: 28px; height: 22px; top: -18px; }

/* ---- deneyim v113: obje türleri + görev şeridi ---- */
.col-obj.col-k-sp { animation-duration: 1.9s; }
.col-obj.col-k-piece { animation: colPieceGlow 1.4s ease-in-out infinite; }
@keyframes colPieceGlow {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 2px rgba(226,55,43,.4)); }
  50% { transform: translateY(-6px) scale(1.12); filter: drop-shadow(0 0 8px rgba(255,200,0,.9)); }
}
#questStrip { position: fixed; left: 12px; top: 104px; z-index: 890; display: none;
  flex-direction: column; gap: 4px; cursor: pointer; }
body.mobile #questStrip { top: 130px; }
.qs-row { display: flex; align-items: center; gap: 5px; background: var(--paper);
  border: 2.5px solid var(--ink); border-radius: 10px; padding: 3px 8px;
  box-shadow: 2px 2px 0 var(--ink); font-size: 11px; font-weight: 800; }
.qs-row.done { opacity: .55; }
.qs-row .qs-i { font-size: 13px; }
.qs-bar { width: 52px; height: 7px; background: #eee5d2; border: 1.5px solid var(--ink);
  border-radius: 5px; overflow: hidden; display: inline-block; }
.qs-bar i { display: block; height: 100%; background: var(--sea); transition: width .3s; }
.qs-row.done .qs-bar i { background: #2e9e44; }
.qs-t { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }


/* giriş ekranı: sıradaki etkinlik satırı */
#evNextRow { margin: 4px 0 0; font-size: 12.5px; font-weight: 800; color: var(--sea); }
/* dar ekran: panel/pencereler taşmasın */
@media (max-width: 420px) {
  #distPanel { right: 60px; width: min(232px, calc(100vw - 80px)); }
  .pm-panel, .panel { max-width: calc(100vw - 24px); }
  #evBar { max-width: calc(100vw - 20px); font-size: 11px; padding: 6px 10px; }
  .qs-bar { width: 40px; }
  .crowd-arrow { width: 52px; height: 52px; }
  .crowd-arrow .ca-nm { font-size: 8.5px; max-width: 44px; }
}

/* v116: Elmas+ sohbet satırı ince altın vurgu (doz düşük) */
.chat-line.sr-hi b { text-shadow: 0 0 6px rgba(255,200,0,.75); }

/* ---- FTUE görev çubuğu + hedef oku (v117) ---- */
#missionBar { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 930; display: none; align-items: center; gap: 9px;
  background: var(--taxi); border: 3px solid var(--ink); border-radius: 14px;
  padding: 10px 16px; font-weight: 800; font-size: 14.5px; color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink); max-width: calc(100vw - 24px); white-space: nowrap;
  animation: msnIn .35s ease-out; }
@keyframes msnIn { from { transform: translateX(-50%) translateY(16px); opacity: 0; } }
#missionBar .ms-n { background: var(--ink); color: var(--taxi); border-radius: 9px;
  padding: 2px 8px; font-size: 12px; flex: none; }
#missionBar .ms-t { overflow: hidden; text-overflow: ellipsis; }
body.mobile #missionBar { bottom: 108px; font-size: 13px; }
#missionArrow { position: fixed; z-index: 935; transform: translate(-50%, -50%);
  display: none; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; }
#missionArrow svg { width: 30px; height: 30px; }
#missionArrow svg path { fill: var(--taxi); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
#missionArrow span { font-size: 11px; font-weight: 800; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 8px; padding: 0 6px; box-shadow: 1.5px 1.5px 0 var(--ink); }