/* ===========================================================
   Legend of Mafia — ნუარული თემა (ვიზუალური პროტოტიპი)
   =========================================================== */

:root {
  --bg:        #0c0c0e;
  --bg-2:      #15151a;
  --panel:     #1b1b22;
  --panel-2:   #22222b;
  --border:    #2e2e38;
  --text:      #e8e6e0;
  --text-dim:  #9a978f;
  --gold:      #d4ac52;
  --gold-2:    #f0d089;
  --gold-d:    #8a6e28;
  --blood:     #8e1f1f;
  --blood-2:   #d8402f;
  --green:     #3f9d57;
  --green-2:   #5fd07a;
  --health:    #c0392b;
  --energy:    #d4a437;
  --nerve:     #6c5ce7;
  --stamina:   #2e86c1;
  --radius:    10px;
  --shadow:    0 8px 28px rgba(0,0,0,.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: "Noto Sans Georgian", "BPG Nino Mtavruli", "Sylfaen", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

body {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(200,162,74,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(142,31,31,.10), transparent 60%),
    var(--bg);
}

.hidden { display: none !important; }
img { max-width: 100%; }
button { font-family: inherit; cursor: pointer; color: inherit; }
a { color: var(--gold-2); text-decoration: none; }

/* ===== ღილაკები ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px; font-weight: 600;
  transition: transform .08s ease, filter .15s ease, background .15s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn-gold   { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a2208; border-color: var(--gold); font-weight: 700; }
.btn-blood  { background: linear-gradient(180deg, var(--blood-2), var(--blood)); border-color: #6e1717; color: #fff; }
.btn-green  { background: linear-gradient(180deg, var(--green-2), var(--green)); border-color: #2c5a39; color: #fff; }
.btn-ghost  { background: transparent; }
.btn-block  { width: 100%; }
.btn-sm     { padding: 7px 12px; font-size: 13px; }

/* =========================================================
   შესვლის ეკრანი
   ========================================================= */
.login-screen {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(200,162,74,.10), transparent 60%),
    linear-gradient(180deg, #0a0a0c, #050506);
}
.login-card {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 34px 28px 26px;
  text-align: center;
}
.login-logo { font-size: 54px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.login-title {
  font-size: 30px; font-weight: 900; letter-spacing: 2px; margin-top: 6px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-sub { color: var(--text-dim); font-size: 14px; margin: 8px 0 26px; }
.login-label { display: block; text-align: left; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.login-input {
  width: 100%; padding: 13px 14px; font-size: 15px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px; margin-bottom: 16px;
}
.login-input:focus { outline: none; border-color: var(--gold); }
.login-note { color: var(--text-dim); font-size: 12px; margin-top: 16px; line-height: 1.5; }
.continue-box { margin-bottom: 18px; }
.login-or { color: var(--text-dim); font-size: 12px; margin-top: 14px; letter-spacing: .3px; }
.google-btn { background: #fff; color: #1f1f1f; border-color: #fff; font-weight: 700; margin-bottom: 8px; }
.google-btn:hover { filter: brightness(.94); }
.auth-status { color: var(--green-2); font-size: 12px; min-height: 14px; margin-bottom: 12px; }

/* =========================================================
   თამაშის shell
   ========================================================= */
.game-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #17171d, #101015);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.menu-toggle {
  display: none; background: transparent; border: 1px solid var(--border);
  color: var(--text); font-size: 18px; width: 40px; height: 40px; border-radius: 8px;
}
.brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brand-mark { font-size: 22px; }
.brand-text {
  font-weight: 900; letter-spacing: 1px; font-size: 16px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.topbar-stats { display: flex; gap: 14px; flex: 1; justify-content: center; flex-wrap: wrap; }
.stat { min-width: 120px; }
.stat-top { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 3px; color: var(--text-dim); }
.stat-top b { color: var(--text); font-weight: 600; }
.bar { height: 8px; background: #000; border-radius: 6px; overflow: hidden; border: 1px solid #000; }
.bar > span { display: block; height: 100%; border-radius: 6px; transition: width .4s ease; }
.bar.health  > span { background: linear-gradient(90deg, #7d1f1f, var(--health)); }
.bar.energy  > span { background: linear-gradient(90deg, #8a6a1c, var(--energy)); }
.bar.nerve   > span { background: linear-gradient(90deg, #463a9e, var(--nerve)); }
.bar.stamina > span { background: linear-gradient(90deg, #1c5a82, var(--stamina)); }

.topbar-user { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.user-meta { text-align: right; line-height: 1.25; }
.user-name { display: block; font-weight: 700; font-size: 14px; }
.user-rank { display: block; font-size: 12px; color: var(--gold-2); }
.user-avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-size: 22px; background: var(--panel-2); border: 1px solid var(--gold); overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.layout { flex: 1; display: flex; align-items: stretch; }

/* გვერდითი მენიუ */
.sidebar {
  width: 230px; flex-shrink: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  padding: 14px 12px;
  display: flex; flex-direction: column;
  position: sticky; top: 63px; align-self: flex-start;
  height: calc(100vh - 63px);
}
.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 8px;
  color: var(--text-dim); font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; text-align: left; background: transparent; width: 100%;
}
.nav-item:hover { background: var(--panel); color: var(--text); }
.nav-item.active { background: linear-gradient(90deg, rgba(200,162,74,.16), transparent); color: var(--gold-2); border-color: rgba(200,162,74,.3); }
.nav-item .ico { font-size: 18px; width: 22px; text-align: center; }
.nav-item .badge { margin-left: auto; font-size: 11px; background: var(--blood); color: #fff; padding: 1px 7px; border-radius: 20px; }
.logout { margin-top: 10px; color: var(--blood-2); border-color: rgba(192,57,43,.4); }
.sidebar-backdrop { display: none; }

/* კონტენტი */
.content { flex: 1; padding: 22px; max-width: 1100px; }

/* =========================================================
   საერთო კომპონენტები
   ========================================================= */
.page-head { margin-bottom: 18px; }
.page-title { font-size: 24px; font-weight: 800; }
.page-title .ico { margin-right: 8px; }
.page-sub { color: var(--text-dim); font-size: 14px; margin-top: 4px; }

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
}
.card + .card { margin-top: 16px; }
.card-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* სტატ-ბლოკები */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.kpi { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.kpi .k-label { font-size: 12px; color: var(--text-dim); }
.kpi .k-val { font-size: 20px; font-weight: 800; margin-top: 4px; }
.kpi .k-val.gold { color: var(--gold-2); }
.kpi .k-val.green { color: var(--green-2); }

/* სიის ბარათი (დანაშაული / იარაღი / მაღაზია) */
.tile {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 15px; display: flex; flex-direction: column; gap: 10px;
}
.tile-head { display: flex; align-items: center; gap: 10px; }
.tile-ico { font-size: 26px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--bg-2); border-radius: 8px; border: 1px solid var(--border); }
.tile-name { font-weight: 700; font-size: 15px; }
.tile-meta { font-size: 12px; color: var(--text-dim); }
.tile-stats { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.chip { background: var(--bg-2); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; color: var(--text-dim); }
.chip b { color: var(--text); }
.chip.gold b { color: var(--gold-2); }
.chip.green b { color: var(--green-2); }

/* პროგრეს-ხაზი (წარმატების შანსი) */
.mini-bar { height: 6px; background: #000; border-radius: 6px; overflow: hidden; }
.mini-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--blood), var(--green-2)); }

/* ცხრილი */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.table th { color: var(--text-dim); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; }
.table tr:hover td { background: var(--panel-2); }
.rank-num { color: var(--gold-2); font-weight: 800; }

/* ფორმა */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.input {
  width: 100%; padding: 11px 13px; font-size: 15px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
}
.input:focus { outline: none; border-color: var(--gold); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row .btn { flex: 1; }

.note { color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* ციხის ბანერი */
.jail-banner {
  text-align: center; padding: 30px 20px;
  background: repeating-linear-gradient(90deg, #14141a, #14141a 14px, #101015 14px, #101015 28px);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.jail-banner .big { font-size: 46px; }
.jail-timer { font-size: 34px; font-weight: 900; color: var(--blood-2); letter-spacing: 2px; margin: 8px 0; }

/* მოვლენების ფიდი */
.feed { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.feed li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 9px 11px; background: var(--panel-2); border-radius: 8px; border-left: 3px solid var(--border); }
.feed li.win  { border-left-color: var(--green-2); }
.feed li.lose { border-left-color: var(--blood-2); }
.feed li .t { color: var(--text-dim); font-size: 12px; margin-left: auto; white-space: nowrap; }

/* კაზინო */
.casino-wheel { display: flex; gap: 14px; justify-content: center; margin: 18px 0; }
.bet-opt { flex: 1; padding: 22px; border-radius: 12px; border: 2px solid var(--border); text-align: center; font-weight: 800; font-size: 16px; background: var(--panel-2); }
.bet-opt.red   { color: #fff; }
.bet-opt.black { color: var(--text); }
.bet-opt.sel { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,162,74,.2); }

/* =========================================================
   toast
   ========================================================= */
.toast-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 10px; }
.toast {
  min-width: 240px; max-width: 340px;
  background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--gold);
  padding: 12px 14px; border-radius: 9px; box-shadow: var(--shadow);
  font-size: 14px; animation: toastIn .25s ease;
}
.toast.win  { border-left-color: var(--green-2); }
.toast.lose { border-left-color: var(--blood-2); }
.toast .toast-title { font-weight: 700; margin-bottom: 2px; }
.toast .toast-body { color: var(--text-dim); font-size: 13px; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.content > * { animation: fadeUp .25s ease; }

/* =========================================================
   responsive
   ========================================================= */
@media (max-width: 900px) {
  .topbar-stats { display: none; }
  .menu-toggle { display: block; }
  .sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; z-index: 60;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: var(--shadow);
  }
  .sidebar.open { transform: none; }
  .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .content { padding: 16px; }
}
@media (max-width: 520px) {
  .brand-text { display: none; }
  .user-meta { display: none; }
  .page-title { font-size: 20px; }
}

/* =========================================================
   სურათიანი კომპონენტები (ასეტების ინტეგრაცია)
   ========================================================= */

/* ფილების სურათები */
.tile-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; }
.tile .tile-name { margin-top: 2px; }
.banner-img { width: 100%; max-height: 240px; object-fit: cover; border-radius: 8px; display: block; }

/* პერსონაჟის არჩევა */
.select-wrap { width: min(900px, 100%); }
.class-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.class-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; text-align: center; cursor: pointer; padding: 0 0 16px;
  display: flex; flex-direction: column; transition: transform .12s ease, border-color .15s ease;
}
.class-card:hover { transform: translateY(-3px); border-color: var(--gold-2); }
.class-card.sel { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,162,74,.22); }
.class-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.class-name { font-weight: 800; font-size: 18px; margin: 12px 14px 6px; }
.class-desc { font-size: 12.5px; color: var(--text-dim); margin: 0 14px 10px; line-height: 1.55; }
.class-perk { font-size: 12.5px; color: var(--gold-2); font-weight: 700; margin: 0 14px; }
.gender-row { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 18px; }
.gender-opt.active { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a2208; border-color: var(--gold); }

/* ინტერაქტიული რუკა */
.map-kpis { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mk { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.mk > span { font-size: 22px; }
.mk-l { font-size: 11px; color: var(--text-dim); }
.mk-v { font-weight: 800; font-size: 16px; }
.mk-v.gold { color: var(--gold-2); } .mk-v.green { color: var(--green-2); }

.map-wrap { position: relative; width: 100%; border-radius: 14px; overflow: hidden; border: 2px solid var(--gold-d); margin-bottom: 16px; box-shadow: inset 0 0 80px rgba(0,0,0,.35), var(--shadow); }
.map-bg { width: 100%; display: block; filter: brightness(1.12) saturate(1.25) contrast(1.05); }
.map-spot {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 0; cursor: pointer;
  transition: transform .12s ease, filter .15s ease;
}
.spot-img-wrap {
  width: clamp(56px, 10vw, 80px); aspect-ratio: 1/1;
  border: 3px solid var(--gold); border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.6), 0 0 0 2px rgba(0,0,0,.5);
  background: #000;
}
.spot-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spot-label {
  margin-top: -6px; font-size: 11px; font-weight: 800; text-align: center; line-height: 1.1;
  background: linear-gradient(180deg, #1a1a22, #0c0c10); color: var(--gold-2);
  border: 1px solid var(--gold-d); border-radius: 20px; padding: 3px 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,.5); white-space: nowrap; position: relative; z-index: 2;
}
.map-spot:hover { transform: translate(-50%, -50%) scale(1.1); z-index: 6; }
.map-spot:hover .spot-img-wrap { box-shadow: 0 8px 22px rgba(0,0,0,.7), 0 0 0 3px var(--gold-2); }
.map-spot.locked { filter: grayscale(.7) brightness(.7); }

/* რეიტინგის ავატარი */
.rank-user { display: flex; align-items: center; gap: 9px; }
.rank-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* პროფილის თავი */
.profile-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.profile-av { width: 76px; height: 76px; border-radius: 14px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--gold); }
.profile-av img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 700px) {
  .class-cards { grid-template-columns: 1fr; }
  .class-img { aspect-ratio: 16 / 10; }
  .map-spot { width: clamp(48px, 19vw, 70px); padding: 3px; }
  .spot-label { font-size: 9.5px; }
  .spot-label small { display: none; }
}

/* =========================================================
   v3 — ლეველი, ვალუტები, ბრძოლა, მაღაზია, ჩანთა, ნავიგაცია
   ========================================================= */

/* --- topbar გადაწყობა --- */
.topbar { gap: 12px; }
.topbar-user { display: flex; align-items: center; gap: 9px; flex-shrink: 0; order: 1; }
.user-meta { text-align: left; }
.brand { order: 2; flex: 1; justify-content: center; }
.topbar-cur { order: 3; display: flex; gap: 6px; flex-shrink: 0; }
.menu-toggle { order: 0; }

.lvl-badge { display: inline-block; min-width: 18px; text-align: center; background: var(--gold); color: #2a2208; font-weight: 800; border-radius: 6px; padding: 0 5px; font-size: 11px; }

/* --- ვალუტები --- */
.cur { display: flex; align-items: center; gap: 5px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px; padding: 3px 5px; cursor: pointer; }
.cur:hover { border-color: var(--gold); }
.cur-ic { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: block; flex-shrink: 0; background: #000; }
.cur-ic img { width: 100%; height: 100%; object-fit: cover; }
.cur-val { font-size: 13px; font-weight: 700; min-width: 10px; color: var(--text); }
.cur-plus { width: 16px; height: 16px; border-radius: 50%; background: var(--green); color: #fff; font-size: 12px; line-height: 15px; text-align: center; font-weight: 800; }

/* --- სტატ-ზოლი --- */
.statbar { display: flex; align-items: center; gap: 12px; padding: 7px 16px; background: linear-gradient(180deg, #141419, #101015); border-bottom: 1px solid var(--border); position: sticky; top: 62px; z-index: 39; overflow-x: auto; }
.statbar::-webkit-scrollbar { height: 0; }
.combat-chips { display: flex; gap: 6px; flex-shrink: 0; }
.cstat { font-size: 11.5px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px; padding: 3px 9px; white-space: nowrap; }
.cstat b { color: #fff; }
.cstat.str { color: #d99a9a; } .cstat.def { color: #9ac0d9; } .cstat.spd { color: #d9cd9a; }
.statbar .stat { min-width: 108px; flex-shrink: 0; }

.chip.str { color: #cf8f8f; } .chip.def { color: #8fb6cf; } .chip.spd { color: #cfc08f; }
.chip.str b, .chip.def b, .chip.spd b { color: #fff; }

/* --- ქვედა ნავიგაცია --- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: 62px; display: flex; background: linear-gradient(180deg, #15151b, #0a0a0e); border-top: 1px solid var(--border); z-index: 45; padding: 0 4px; box-shadow: 0 -6px 20px rgba(0,0,0,.45); }
.bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: none; color: var(--text-dim); font-family: inherit; cursor: pointer; border-top: 2px solid transparent; }
.bn-item.active { color: var(--gold-2); border-top-color: var(--gold); background: linear-gradient(180deg, rgba(200,162,74,.1), transparent); }
.bn-ico { font-size: 19px; }
.bn-label { font-size: 9.5px; font-weight: 600; }

.content { padding-bottom: 84px; }
.sidebar { top: 108px; height: calc(100vh - 108px); padding-bottom: 70px; }

/* --- მაღაზიის ტაბები --- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tab { background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px; padding: 8px 14px; color: var(--text-dim); font-family: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.tab.active { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a2208; border-color: var(--gold); }

/* --- რაოდენობა --- */
.qty-row { display: flex; gap: 6px; align-items: center; }
.qbtn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 18px; font-weight: 700; flex-shrink: 0; }
.qty { flex: 1; text-align: center; padding: 8px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 15px; min-width: 0; }

/* --- სპორტ დარბაზი --- */
.gym-stat { font-size: 40px; text-align: center; }

/* --- ჩანთა / აღჭურვა --- */
.equip-wrap { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.equip-body { width: 150px; flex-shrink: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.equip-body img { width: 100%; display: block; }
.equip-slots { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.equip-slot { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
.es-ico { font-size: 20px; width: 26px; text-align: center; }
.es-info { flex: 1; } .es-name { font-size: 12px; color: var(--text-dim); } .es-val { font-weight: 700; font-size: 14px; }
.es-rm { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-2); color: var(--blood-2); cursor: pointer; }

/* --- ბრძოლის მოდალი + ანიმაცია --- */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.74); display: grid; place-items: center; z-index: 100; padding: 16px; animation: fadeUp .2s ease; }
.battle { width: min(640px, 100%); background: linear-gradient(180deg, #1b1b22, #101015); border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); }
.battle-head { text-align: center; font-weight: 800; font-size: 18px; margin-bottom: 16px; color: var(--gold-2); }
.battle-arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; }
.fighter { text-align: center; position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--panel-2); transition: transform .12s ease, border-color .15s ease; }
.fighter-av { width: 88px; height: 88px; border-radius: 12px; overflow: hidden; margin: 0 auto 8px; border: 2px solid var(--border); }
.fighter-av img { width: 100%; height: 100%; object-fit: cover; }
.fighter-name { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.hpbar { height: 10px; background: #000; border-radius: 6px; overflow: hidden; border: 1px solid #000; }
.hpbar > span { display: block; height: 100%; background: linear-gradient(90deg, #7d1f1f, var(--blood-2)); transition: width .3s ease; }
.hp-num { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.fighter-stats { font-size: 12px; margin-top: 6px; color: var(--text-dim); }
.battle-vs { align-self: center; font-weight: 900; color: var(--blood-2); font-size: 20px; }
.fighter.attack { transform: scale(1.06) translateY(-4px); border-color: var(--gold); z-index: 2; }
.fighter.hit { animation: shake .3s ease; }
.fighter.ko { opacity: .45; filter: grayscale(.8); }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.dmg-float { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); color: var(--blood-2); font-weight: 900; font-size: 22px; animation: floatUp .5s ease forwards; pointer-events: none; text-shadow: 0 2px 6px #000; }
@keyframes floatUp { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -26px); } }
.battle-log { margin-top: 14px; font-size: 12.5px; color: var(--text-dim); min-height: 38px; max-height: 76px; overflow: hidden; line-height: 1.55; }
.battle-log .g { color: var(--green-2); font-weight: 700; } .battle-log .r { color: var(--blood-2); font-weight: 700; }
.battle-foot { margin-top: 10px; text-align: center; }
.battle-result { font-size: 22px; font-weight: 900; margin-bottom: 4px; }
.battle-result.win { color: var(--green-2); } .battle-result.lose { color: var(--blood-2); }

/* --- ზოგადი მოდალი --- */
.modal-box { width: min(440px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }
.modal-title { font-weight: 800; font-size: 18px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.mini-ic { width: 24px; height: 24px; object-fit: contain; }
.pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.pack:hover { border-color: var(--gold); }
.pack-ic { width: 46px; height: 46px; object-fit: contain; }
.pack-d { font-weight: 800; } .pack-p { color: var(--gold-2); font-size: 13px; }

@media (max-width: 900px) {
  .brand { display: none; }
  .topbar-cur { gap: 4px; }
  .cur { padding: 2px 4px; }
  .cur-plus { display: none; }
  .sidebar { top: 0; height: 100vh; padding-bottom: 16px; }
}

/* =========================================================
   v4 — kartulimafia-ს მსგავსი HUD (რგოლი, ვალუტები, ტაიმერი, მცურავი ბარი)
   ========================================================= */
.hud-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; order: 1; }
.avatar-ring { width: 50px; height: 50px; border-radius: 50%; padding: 3px; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 0 0 1px #000 inset; }
.avatar-ring .user-avatar { width: 44px; height: 44px; border: 2px solid #0c0c10; }

.regen { order: 3; flex-shrink: 0; display: flex; align-items: center; gap: 5px; font-weight: 800; color: var(--text-dim); font-size: 13px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px; padding: 6px 11px; }
.regen #regen-timer { color: var(--gold-2); min-width: 12px; text-align: center; }

/* ვიტალის + ღილაკი */
.stat-top { gap: 4px; }
.stat-top > span:first-child { flex: 1; }
.vplus { width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(180deg, var(--green-2), var(--green)); color: #fff; border: none; font-size: 12px; font-weight: 800; line-height: 1; margin-left: 5px; cursor: pointer; flex-shrink: 0; }
.vplus:hover { filter: brightness(1.15); }

/* მცურავი მორთული ქვედა ბარი */
.bottom-nav {
  left: 50%; right: auto; transform: translateX(-50%);
  bottom: 10px; width: min(720px, calc(100% - 20px)); height: 64px;
  border: 2px solid var(--gold-d); border-radius: 16px;
  background: linear-gradient(180deg, #20202a, #0c0c12);
  box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  padding: 0 6px; gap: 2px;
}
.bn-item { border-radius: 12px; border-top: none; margin: 6px 0; }
.bn-item.active { background: linear-gradient(180deg, rgba(212,172,82,.22), rgba(212,172,82,.05)); border-top: none; box-shadow: inset 0 0 0 1px rgba(212,172,82,.4); }
.bn-ico { font-size: 21px; }
.content { padding-bottom: 96px; }

@media (max-width: 520px) {
  .user-meta { display: none; }
  .avatar-ring { width: 42px; height: 42px; }
  .avatar-ring .user-avatar { width: 36px; height: 36px; }
  .bn-label { font-size: 9px; }
}

/* =========================================================
   სიუჟეტური კამპანია (ისტორია)
   ========================================================= */
.story-goals { display: flex; flex-direction: column; gap: 8px; margin: 4px 0; }
.story-goal {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 12px; font-size: 14px;
}
.story-goal b { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.story-goal b.g { color: var(--green-2); }

/* =========================================================
   HUASHU POLISH — კინემატოგრაფიული დახვეწა (დამატებითი ფენა)
   მუქი მელნისფერი სიღრმე • ოქროს აქცენტები • ხავერდოვანი gradient-ები
   • გლუვი expo-easing გადასვლები. არსებულ HTML/JS სტრუქტურას არ ცვლის.
   ========================================================= */
:root {
  --ease: cubic-bezier(.16, 1, .3, 1);          /* expo-out — ხავერდოვანი */
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  /* --- თბილი მუქი პალიტრა (kartulimafia-ს განწყობა: ყავისფერ-შავი + წითელი + ოქრო) --- */
  --bg:        #110a09;
  --bg-2:      #1a100e;
  --panel:     #221512;
  --panel-2:   #2d1b17;
  --border:    #3b251f;
  --text:      #f1e7dd;
  --text-dim:  #ac9488;
  --gold:      #e6ad44;
  --gold-2:    #ffd98a;
  --gold-d:    #966a24;
  --blood:     #b3132a;
  --blood-2:   #ec1f37;
  --health:    #d63a2b;
  --energy:    #e0a437;
  --ink: #0c0605;
  --velvet: linear-gradient(180deg, #2a1a16, #190f0d);
  --sheen: linear-gradient(135deg, rgba(255,235,210,.06), rgba(255,235,210,0) 38%);
  --gold-glow: 0 0 26px rgba(255,205,115,.22);
  --shadow-lg: 0 22px 60px rgba(0,0,0,.6);
}

/* --- ფონტი: Rubik (ლათინური/ციფრები) + Noto ქართულისთვის --- */
html, body { font-family: "Rubik", "Noto Sans Georgian", "BPG Nino Mtavruli", system-ui, sans-serif; }
.brand-text, .login-title { font-family: "Rubik", "Noto Sans Georgian", sans-serif; letter-spacing: 2px; font-weight: 800; }

/* ---- კინემატოგრაფიული ფონი + ნაზი ვინეტი ---- */
body {
  background:
    radial-gradient(1100px 620px at 72% -12%, rgba(255,190,95,.09), transparent 58%),
    radial-gradient(950px 580px at -12% 112%, rgba(236,31,55,.14), transparent 60%),
    radial-gradient(1500px 950px at 50% 48%, rgba(120,40,28,.12), transparent 72%),
    var(--ink);
  background-attachment: fixed;
}
.game-shell::after {
  content: ""; position: fixed; inset: 0; z-index: 31; pointer-events: none;
  background: radial-gradient(135% 105% at 50% 42%, transparent 62%, rgba(0,0,0,.34) 100%);
}

/* ---- გლუვი გადასვლები ეკრანებზე (expo reveal + stagger) ---- */
@keyframes hsReveal { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes hsPop    { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.content > * { animation: hsReveal .44s var(--ease) both; }
.content > *:nth-child(2) { animation-delay: .05s; }
.content > *:nth-child(3) { animation-delay: .10s; }
.content > *:nth-child(4) { animation-delay: .15s; }
.content > *:nth-child(n+5) { animation-delay: .18s; }
.grid .tile { animation: hsPop .42s var(--ease) both; }
.grid .tile:nth-child(2) { animation-delay: .04s; }
.grid .tile:nth-child(3) { animation-delay: .08s; }
.grid .tile:nth-child(4) { animation-delay: .12s; }
.grid .tile:nth-child(5) { animation-delay: .16s; }
.grid .tile:nth-child(6) { animation-delay: .20s; }
.grid .tile:nth-child(n+7) { animation-delay: .24s; }

/* ---- ხავერდოვანი ბარათები ---- */
.card {
  background: var(--velvet);
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 12px 32px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045);
  position: relative; overflow: hidden;
}
.card::before { content: ""; position: absolute; inset: 0; background: var(--sheen); pointer-events: none; border-radius: inherit; }
.card > * { position: relative; }
.kpi { background: linear-gradient(180deg, #2c1a16, #1d110e); border-color: rgba(255,225,200,.06); }

/* ---- ფილები: hover-აზიდვა + სურათის ნაზი zoom ---- */
.tile {
  background: linear-gradient(180deg, #2a1814, #1b0f0d);
  border-color: rgba(255,225,200,.06);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.tile:hover { transform: translateY(-4px); border-color: rgba(232,199,102,.42); box-shadow: 0 16px 36px rgba(0,0,0,.5), var(--gold-glow); }
.tile-img { transition: transform .55s var(--ease); }
.tile:hover .tile-img { transform: scale(1.045); }

/* ---- ღილაკები: გლუვი + ნათება ---- */
.btn { transition: transform .15s var(--ease), filter .2s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease); letter-spacing: .2px; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn-gold:hover  { box-shadow: 0 8px 24px rgba(232,199,102,.32); }
.btn-blood:hover { box-shadow: 0 8px 24px rgba(216,64,47,.30); }
.btn-green:hover { box-shadow: 0 8px 24px rgba(95,208,122,.26); }

/* ---- გვერდითი მენიუ: ხავერდოვანი, ოქროს ინდიკატორით ---- */
.sidebar { background: linear-gradient(180deg, #170d0b, #0d0706); border-right-color: rgba(255,225,200,.05); }
.nav-item {
  position: relative; overflow: hidden; border: 1px solid transparent;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.nav-item::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  transition: height .24s var(--ease);
}
.nav-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.nav-item.active { background: linear-gradient(90deg, rgba(232,199,102,.15), rgba(232,199,102,0) 82%); color: var(--gold-2); border-color: transparent; }
.nav-item.active::before { height: 58%; }
.nav-item .badge { box-shadow: 0 2px 8px rgba(0,0,0,.4); }

/* ---- topbar / statbar: ყინულისებური (frosted) ---- */
.topbar {
  background: linear-gradient(180deg, rgba(30,17,14,.92), rgba(16,9,8,.92));
  backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25);
  border-bottom-color: rgba(255,225,200,.06);
}
.statbar {
  background: linear-gradient(180deg, rgba(26,15,12,.9), rgba(15,9,8,.9));
  backdrop-filter: blur(8px) saturate(1.15); -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border-bottom-color: rgba(255,225,200,.05);
}
.brand-text { letter-spacing: 2px; }

/* ---- მცურავი ქვედა ბარი: frosted + ოქროს ნათება ---- */
.bottom-nav {
  background: linear-gradient(180deg, rgba(44,26,21,.9), rgba(14,8,7,.95));
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-color: rgba(255,205,115,.5);
  box-shadow: 0 16px 42px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,235,210,.06), var(--gold-glow);
}
.bn-item { transition: color .25s var(--ease), background .25s var(--ease), transform .2s var(--ease); }
.bn-item:hover { color: var(--text); transform: translateY(-2px); }
.bn-ico { transition: transform .25s var(--ease); }
.bn-item.active .bn-ico { transform: translateY(-1px) scale(1.06); }

/* ---- მოდალები: frosted ფონი + pop ---- */
.modal-back { background: rgba(4,5,10,.68); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.battle, .modal-box { background: var(--velvet); border-color: rgba(255,255,255,.08); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.05); animation: hsPop .4s var(--ease) both; }

/* ---- შესვლის ბარათი: ხავერდი + ბზინვარება ---- */
.login-card { background: var(--velvet); border-color: rgba(255,255,255,.08); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06); position: relative; overflow: hidden; }
.login-card::before { content: ""; position: absolute; inset: 0; background: var(--sheen); pointer-events: none; }
.login-card > * { position: relative; }

/* ---- ფორმები: გლუვი ფოკუსი ---- */
.input, .login-input { transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.input:focus, .login-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,199,102,.14); }
.tab { transition: all .22s var(--ease); }
.tab:hover { color: var(--text); border-color: rgba(232,199,102,.4); }
.cur { transition: border-color .2s var(--ease), transform .15s var(--ease); }
.cur:hover { transform: translateY(-1px); }

/* ---- ზოლების გლუვი შევსება ---- */
.bar > span, .mini-bar > span, .hpbar > span { transition: width .5s var(--ease); }

/* ---- დახვეწილი scrollbar ---- */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(232,199,102,.18); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(232,199,102,.32); }

/* ---- ცხრილის სტრიქონების გლუვი hover ---- */
.table tr td { transition: background .2s var(--ease); }

/* ---- თბილი overrides (შესვლა, რუკის იარლიყები) ---- */
.login-screen {
  background:
    radial-gradient(820px 420px at 50% 0%, rgba(255,190,95,.10), transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgba(236,31,55,.10), transparent 60%),
    linear-gradient(180deg, #0e0706, #060303);
}
.spot-label { background: linear-gradient(180deg, #241310, #140a08); }
.jail-banner { background: repeating-linear-gradient(90deg, #1a0f0d, #1a0f0d 14px, #140a09 14px, #140a09 28px); }

/* ---- მოძრაობის შემცირების პატივისცემა ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================
   REDESIGN v2 — kartulimafia-ს განლაგება: SVG ხატულები, ფანჯრები,
   მცურავი ბარი, მენიუ-ბადე, პროფილი, ჩატი/გაზეთი. (ეტაპი 1)
   ========================================================= */

/* --- SVG ხატულები --- */
.ic { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.18em; flex: none; }

/* --- მარცხენა sidebar მოხსნილია --- */
.sidebar, .sidebar-backdrop, #logout-btn { display: none !important; }
.layout { display: block; }
.content { margin-left: auto; margin-right: auto; }

/* --- ფანჯარა (არა-home ეკრანები ჩარჩოში) --- */
.content { transition: none; }
.is-window .content {
  max-width: 700px; margin: 18px auto 110px; padding: 20px;
  background: var(--velvet);
  border: 1px solid rgba(255,205,115,.28);
  border-radius: 16px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,235,210,.06);
  position: relative;
}
.is-window .content::before, .is-window .content::after {
  content: ""; position: absolute; top: 7px; width: 20px; height: 20px; pointer-events: none;
  border: 2px solid var(--gold-2); opacity: .8; z-index: 3;
}
.is-window .content::before { left: 7px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.is-window .content::after  { right: 7px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; }

/* --- ფანჯრის წითელი header (page-head) --- */
.is-window .page-head {
  margin: -20px -20px 18px; padding: 13px 18px;
  background: linear-gradient(180deg, #c4152e, #7d0f1d);
  border-radius: 16px 16px 0 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.35), 0 3px 12px rgba(0,0,0,.4);
}
.is-window .page-title { font-size: 17px; color: #fff; font-weight: 800; display: flex; align-items: center; gap: 9px; flex: 1; }
.is-window .page-title .ico { display: inline-flex; }
.is-window .page-title .ico .ic { width: 21px; height: 21px; }
.is-window .page-sub { color: rgba(255,255,255,.82); font-size: 12.5px; flex-basis: 100%; margin: 0; }

/* X ღილაკი */
.win-x { width: 30px; height: 30px; border-radius: 9px; border: none; background: rgba(0,0,0,.28); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none; cursor: pointer; transition: background .2s var(--ease); }
.win-x:hover { background: var(--blood-2); }
.win-x .ic { width: 18px; height: 18px; }
.win-x-route { display: none; }
.is-window .win-x-route { display: flex; }

/* --- ზოგადი ფანჯარა (.win — მენიუ/მოდალები) --- */
.win {
  width: min(580px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--velvet); border: 1px solid rgba(255,205,115,.28); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,235,210,.06); animation: hsPop .4s var(--ease) both; position: relative;
}
.win-head { display: flex; align-items: center; padding: 12px 16px; background: linear-gradient(180deg, #c4152e, #7d0f1d); box-shadow: inset 0 -2px 0 rgba(0,0,0,.35); }
.win-title { flex: 1; color: #fff; font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 9px; }
.win-title .ic { width: 20px; height: 20px; }
.win-body { padding: 16px; overflow-y: auto; }

/* --- მენიუ-ბადე --- */
.menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.menu-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 15px 6px;
  border-radius: 13px; border: 1px solid var(--border); background: linear-gradient(180deg, #2a1814, #1b0f0d);
  color: var(--text-dim); cursor: pointer; position: relative; font-size: 12px; font-weight: 600; font-family: inherit;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), color .22s var(--ease);
}
.menu-tile .ic { width: 27px; height: 27px; color: var(--gold-2); transition: transform .22s var(--ease); }
.menu-tile span { text-align: center; line-height: 1.2; }
.menu-tile:hover { color: var(--text); border-color: rgba(255,205,115,.5); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.45), var(--gold-glow); }
.menu-tile:hover .ic { transform: scale(1.12); }
.menu-badge { position: absolute; top: 5px; right: 7px; font-size: 10px; background: var(--blood-2); color: #fff; padding: 1px 6px; border-radius: 10px; }
@media (max-width: 520px) { .menu-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- ქვედა ბარი: SVG ხატულები --- */
.bn-ico { display: inline-flex; }
.bn-ico .ic { width: 24px; height: 24px; }
.bn-item { position: relative; }
.bn-badge { position: absolute; top: 5px; right: 20%; background: var(--blood-2); color: #fff; font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 10px; }

/* --- HUD ხატულები --- */
.cstat { display: inline-flex; align-items: center; gap: 4px; }
.cstat .ic { width: 14px; height: 14px; }
.vlabel { display: inline-flex; align-items: center; gap: 5px; }
.vlabel .ic { width: 13px; height: 13px; opacity: .9; }

/* --- ჩატი --- */
.chat-list { height: 46vh; min-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 2px; margin-bottom: 10px; }
.chat-msg { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; font-size: 10.5px; line-height: 1.45; word-break: break-word; }
.chat-msg b { color: var(--gold-2); margin-right: 6px; }
.chat-input { display: flex; gap: 8px; align-items: flex-end; }
.chat-input .input { flex: 1; }
.chat-input .btn { flex: none; padding: 0 18px; font-size: 16px; }
/* საწერი ველი — ვერტიკალურად იზრდება; font-size 16px = iOS ფოკუსზე ვეღარ ზუმავს */
.chat-textarea { resize: none; overflow-y: auto; min-height: 40px; max-height: 110px; line-height: 1.4; font-size: 16px; padding-top: 9px; padding-bottom: 9px; }
/* @მონიშვნა: სახელი დასაჭერია; მონიშნული ტექსტი — მწვანე მონიშნულისთვის, ოქროსფერი სხვებისთვის */
.chat-nick { cursor: pointer; }
.chat-mention { color: var(--gold-2); font-weight: 600; }
.chat-mention.me { color: var(--green-2); font-weight: 700; }

/* =========================================================
   REDESIGN v3 — IMMERSIVE + BLOOD (შავი/სისხლისფერი, სრულეკრანიანი)
   ========================================================= */
:root {
  --bg: #08080a; --bg-2: #0e0e12; --panel: #121217; --panel-2: #1a1a21; --border: #26262e;
  --text: #f2f3f6; --text-dim: #9a9ca6;
  --blood: #b00712; --blood-2: #e6121f; --blood-bright: #ff2a36;
  --gold: #d11020; --gold-2: #ff3340; --gold-d: #7a0911;
  --health: #e6121f; --energy: #e6a92f; --nerve: #7b5cff; --stamina: #2e9fe0;
  --green: #36a95e; --green-2: #5fe089;
  --ink: #060608;
  --velvet: linear-gradient(180deg, #16161c, #0c0c10);
  --sheen: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%);
  --gold-glow: 0 0 26px rgba(230,18,31,.28);
  --shadow-lg: 0 26px 70px rgba(0,0,0,.7);
}
body {
  background:
    radial-gradient(1200px 720px at 50% -12%, rgba(230,18,31,.07), transparent 60%),
    radial-gradient(900px 620px at 100% 112%, rgba(230,18,31,.05), transparent 60%),
    var(--ink);
}

/* --- სისხლიანი ლოგო --- */
.brand-blood {
  font-family: "Rubik", sans-serif; font-weight: 900; font-size: 50px; line-height: .92; letter-spacing: 1px;
  text-align: center; position: relative; display: inline-block; margin: 6px auto 22px;
  background: linear-gradient(180deg, #ff4b54 0%, #e6121f 45%, #8a0810 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 0 #3e0205) drop-shadow(0 8px 22px rgba(230,18,31,.55));
}
.brand-blood .drips { position: absolute; left: 6%; right: 6%; bottom: -10px; height: 22px; display: flex; justify-content: space-between; pointer-events: none; }
.brand-blood .drips i { position: relative; display: block; width: 7px; background: linear-gradient(180deg, #e6121f, #7a0911); border-radius: 0 0 50% 50%; box-shadow: 0 0 8px rgba(230,18,31,.5); }
.brand-blood .drips i:nth-child(1) { height: 16px; } .brand-blood .drips i:nth-child(2) { height: 9px; }
.brand-blood .drips i:nth-child(3) { height: 21px; } .brand-blood .drips i:nth-child(4) { height: 12px; }
.brand-blood .drips i:nth-child(5) { height: 18px; }
.brand-blood .drips i::after { content: ""; position: absolute; bottom: -4px; left: -1px; width: 9px; height: 9px; border-radius: 50%; background: #c0101c; }

/* --- immersive shell --- */
.game-shell { position: fixed; inset: 0; overflow: hidden; display: block; min-height: 0; }
.map-stage { position: absolute; inset: 0; overflow: hidden; background: #0a0a0d; }
.map-inner { position: absolute; inset: 0; transform-origin: center center; transition: transform .35s var(--ease); }
.map-bg { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.04) saturate(1.08) contrast(1.02); }
.map-inner .map-spot { position: absolute; transform: translate(-50%, -50%); }

/* --- მცურავი HUD --- */
.hud-tl, .hud-tc, .hud-tr {
  position: absolute; top: 12px; z-index: 70;
  background: linear-gradient(180deg, rgba(18,18,23,.84), rgba(9,9,12,.86));
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.hud-tl { left: 12px; display: flex; align-items: center; gap: 11px; padding: 8px 16px 8px 8px; }
.hud-tc { left: 50%; transform: translateX(-50%); display: flex; gap: 14px; padding: 10px 18px; }
.hud-tr { right: 12px; display: flex; align-items: center; gap: 14px; padding: 9px 16px; }

.avatar-ring { width: 54px; height: 54px; border-radius: 50%; padding: 3px; position: relative; flex: none; box-shadow: 0 0 0 1px #000 inset; }
.avatar-ring .user-avatar { width: 48px; height: 48px; border: 2px solid #0c0c10; border-radius: 50%; overflow: hidden; }
.hud-lvl { position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, var(--blood-2), var(--blood)); color: #fff; font-weight: 800; font-size: 11px; padding: 1px 7px; border-radius: 10px; border: 1px solid rgba(0,0,0,.5); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.hud-id .user-name { font-weight: 800; font-size: 15px; color: var(--text); }
.hud-id .user-rank { font-size: 12px; color: var(--blood-bright); font-weight: 600; }
.hud-cur { display: flex; gap: 7px; margin-top: 6px; }
.hud-cur .cur { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }

.hud-tc .cstat { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--text); }
.hud-tc .cstat.str { color: #ff9a9a; } .hud-tc .cstat.def { color: #9ad0ff; } .hud-tc .cstat.spd { color: #ffd98a; }
.hud-tc .cstat .ic { width: 17px; height: 17px; }
.hud-tc .cstat b { color: #fff; }

.hud-vitals { display: flex; gap: 12px; }
.hud-vitals .stat { min-width: 84px; }
.hud-vitals .stat-top { display: flex; align-items: center; gap: 5px; font-size: 12px; margin-bottom: 4px; }
.hud-vitals .vlabel .ic { width: 15px; height: 15px; }
.hud-vitals .vplus { margin-left: auto; }
.regen { display: flex; align-items: center; gap: 5px; font-weight: 800; color: var(--text-dim); font-size: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 6px 11px; }
.regen #regen-timer { color: var(--blood-bright); min-width: 12px; text-align: center; }

/* --- რუკის zoom --- */
.map-zoom { position: absolute; left: 14px; bottom: 90px; z-index: 25; display: flex; flex-direction: column; gap: 8px; }
.zbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(22,22,28,.9), rgba(10,10,13,.92)); backdrop-filter: blur(10px); color: #fff; font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.5); transition: all .2s var(--ease); }
.zbtn:hover { border-color: var(--blood-2); box-shadow: 0 8px 22px rgba(0,0,0,.5), var(--gold-glow); transform: translateY(-1px); }

/* --- ქვედა მცურავი ბარი --- */
.action-bar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 25;
  z-index: 70;
  display: flex; gap: 2px; padding: 8px 12px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(22,22,28,.92), rgba(8,8,11,.95));
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(230,18,31,.4);
  box-shadow: 0 16px 44px rgba(0,0,0,.65), 0 0 26px rgba(230,18,31,.14), inset 0 1px 0 rgba(255,255,255,.06);
}
.action-bar .bn-item { flex: none; width: 72px; padding: 7px 4px; border-radius: 14px; border: none; background: none; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-family: inherit; transition: color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); position: relative; }
.action-bar .bn-item:hover { color: var(--text); transform: translateY(-2px); }
.action-bar .bn-item.active { color: #fff; background: linear-gradient(180deg, rgba(230,18,31,.3), rgba(230,18,31,.08)); box-shadow: inset 0 0 0 1px rgba(230,18,31,.45); }
.action-bar .bn-ico { display: inline-flex; }
.action-bar .bn-ico .ic { width: 25px; height: 25px; }
.action-bar .bn-label { font-size: 10px; font-weight: 600; }
.action-bar .bn-badge { top: 3px; right: 14px; }

/* --- ფანჯრის overlay --- */
.window-root { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 104px 16px 110px; overflow-y: auto; background: rgba(4,4,6,.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.window-root.hidden { display: none !important; }
.win-panel { width: min(560px, 100%); padding: 0 14px 16px; background: var(--velvet); border: 1px solid rgba(255,255,255,.1); border-top: 3px solid var(--blood-2); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; position: relative; animation: hsPop .34s var(--ease) both; }
.win-panel .page-head { margin: 0 -14px 14px; padding: 11px 14px; background: linear-gradient(180deg, #c4152e, #7d0f1d); border-radius: 13px 13px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.35); }
.win-panel .page-title { flex: 1; color: #fff; font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.win-panel .page-title .ico { display: inline-flex; } .win-panel .page-title .ico .ic { width: 19px; height: 19px; }
.win-panel .page-sub { color: rgba(255,255,255,.84); font-size: 12px; flex-basis: 100%; margin: 0; }
.win-panel .win-x-route { display: flex; }

/* ფანჯრის შიგნით — კომპაქტური კონტენტი */
.win-panel .card { padding: 13px; }
.win-panel .grid-auto { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.win-panel .tile { padding: 10px; gap: 7px; }
.win-panel .tile-name { font-size: 13.5px; }
.win-panel .tile-meta { font-size: 11px; }
.win-panel .card-title { font-size: 15px; margin-bottom: 10px; }
.win-panel .bot-av { width: 66px; height: 66px; }
.win-panel .kpi { padding: 11px; }
.win-panel .kpi .k-val { font-size: 17px; }

/* --- surface overrides (ყავისფერი ქრება → ნეიტრალური მუქი) --- */
.tile { background: linear-gradient(180deg, #1a1a21, #101015); border-color: rgba(255,255,255,.07); }
.tile:hover { border-color: rgba(230,18,31,.5); box-shadow: 0 16px 36px rgba(0,0,0,.55), var(--gold-glow); }
.kpi { background: linear-gradient(180deg, #191920, #101015); border-color: rgba(255,255,255,.06); }
.menu-tile { background: linear-gradient(180deg, #17171d, #0e0e12); }
.menu-tile .ic { color: var(--blood-bright); }
.menu-tile:hover { border-color: rgba(230,18,31,.5); }
.spot-label { background: linear-gradient(180deg, #18181f, #0a0a0d); color: #fff; border-color: rgba(230,18,31,.55); }
.jail-banner { background: repeating-linear-gradient(90deg, #15151b, #15151b 14px, #0e0e12 14px, #0e0e12 28px); }
.login-screen { background: radial-gradient(820px 460px at 50% -5%, rgba(230,18,31,.12), transparent 60%), radial-gradient(700px 500px at 50% 120%, rgba(120,9,17,.18), transparent 60%), linear-gradient(180deg, #0a0a0d, #050506); }
.btn-gold { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* --- responsive (immersive HUD) --- */
@media (max-width: 900px) {
  .hud-tc { display: none; }
  .hud-tr { gap: 8px; padding: 8px 10px; }
  .hud-vitals { gap: 8px; }
  .hud-vitals .stat { min-width: 60px; }
}
/* მობილური: HUD ორ ცალკე რიგად (ედება ერთმანეთს რომ აღარ) */
@media (max-width: 640px) {
  .hud-tl { top: 8px; left: 8px; right: 8px; padding: 6px 10px 6px 6px; gap: 9px; }
  .hud-id .user-rank { display: none; }
  .hud-cur { gap: 5px; margin-top: 4px; }
  .hud-tr { top: 84px; left: 8px; right: 8px; padding: 7px 10px; gap: 6px; justify-content: space-between; }
  .hud-vitals { gap: 6px; flex: 1; }
  .hud-vitals .stat { min-width: 0; flex: 1; }
  .hud-vitals .stat-top { font-size: 11px; }
  .regen { flex: none; }
  .action-bar .bn-item { width: 46px; }
  .action-bar .bn-label { display: none; }
  .map-zoom { bottom: 84px; }
  .window-root { padding-top: 150px; }
  .chat-drawer { top: 146px; right: 8px; bottom: 78px; }
}

/* --- გლობალური ჩატი: მრგვალი ღილაკი + მარჯვენა drawer --- */
.chat-fab {
  position: absolute; right: 16px; bottom: 18px; z-index: 71;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(230,18,31,.55); background: linear-gradient(180deg, #1c1c24, #0c0c10);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.6), var(--gold-glow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.chat-fab:hover { transform: translateY(-2px) scale(1.05); }
.chat-fab .ic { width: 26px; height: 26px; }
.chat-fab-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 10px; background: var(--blood-2); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.chat-fab-badge.hidden { display: none; }

.chat-drawer {
  position: absolute; top: 88px; right: 12px; bottom: 90px; z-index: 72; width: min(310px, 84vw);
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(18,18,23,.97), rgba(9,9,12,.98));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(230,18,31,.42); border-radius: 16px;
  box-shadow: -10px 18px 54px rgba(0,0,0,.6);
  animation: drawerIn .3s var(--ease) both;
}
.chat-drawer.hidden { display: none !important; }
.chat-drawer { transition: bottom .2s var(--ease); }   /* 📱 კლავიატურაზე გლუვად ადის */
@keyframes drawerIn { from { transform: translateX(46px); opacity: 0; } to { transform: none; opacity: 1; } }
.chat-head { display: flex; align-items: center; padding: 13px 16px; background: linear-gradient(180deg, #c4152e, #7d0f1d); box-shadow: inset 0 -2px 0 rgba(0,0,0,.35); }
@media (max-width: 560px) { .chat-drawer { top: 76px; bottom: 80px; right: 8px; } }
.chat-head-title { flex: 1; color: #fff; font-weight: 800; font-size: 16px; }
.chat-drawer .chat-list { flex: 1; height: auto; min-height: 0; overflow-y: auto; padding: 12px; margin: 0; }
.chat-drawer .chat-input { padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.08); }
.chat-drawer .chat-input .btn { padding: 0 14px; }

/* --- ჩაკეცვადი სექცია (details) --- */
.collapse { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); overflow: hidden; }
.collapse > summary { list-style: none; cursor: pointer; padding: 12px 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-dim); transition: color .2s var(--ease); }
.collapse > summary::-webkit-details-marker { display: none; }
.collapse > summary::after { content: "▾"; margin-left: auto; transition: transform .2s var(--ease); }
.collapse[open] > summary::after { transform: rotate(180deg); }
.collapse[open] > summary, .collapse > summary:hover { color: var(--text); }
.collapse > summary .ic { width: 16px; height: 16px; }
.collapse .collapse-body { padding: 0 12px 12px; }

/* --- ბოტი/NPC ბარათი (ნარკომანი და სხვ.) --- */
.bot-card { display: flex; gap: 14px; align-items: center; }
.bot-av { width: 86px; height: 86px; border-radius: 12px; object-fit: cover; flex: none; border: 1px solid var(--border); }
.bot-info { flex: 1; min-width: 0; }
.bot-name { font-weight: 800; font-size: 18px; margin-bottom: 4px; }

/* --- ძებნის ორბი (heat) --- */
.heat-orb {
  position: absolute; left: 14px; bottom: 196px; z-index: 70;
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid #e6121f; background: linear-gradient(180deg, rgba(22,22,28,.92), rgba(10,10,13,.94));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font-weight: 800; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.5); transition: transform .15s var(--ease);
}
.heat-orb:hover { transform: scale(1.07); }
.heat-orb #heat-val::after { content: "%"; font-size: 10px; opacity: .8; }
@media (max-width: 560px) { .heat-orb { bottom: 190px; width: 46px; height: 46px; } }

/* --- გზამკვლევის chip (დამწყები) --- */
.guide-chip {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 71;
  display: none; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(230,18,31,.96), rgba(140,8,16,.96)); color: #fff;
  font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22); box-shadow: 0 8px 22px rgba(0,0,0,.5), var(--gold-glow);
  animation: chipPulse 2s ease-in-out infinite;
}
.guide-chip:hover { filter: brightness(1.1); }
@keyframes chipPulse { 0%,100% { box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 0 rgba(230,18,31,.4); } 50% { box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 18px rgba(230,18,31,.75); } }
@media (max-width: 560px) { .guide-chip { bottom: 150px; font-size: 12px; padding: 6px 13px; } }

/* =========================================================
   REDESIGN v4 — ULTRA (2026 სტანდარტი)
   თანამედროვე დიზაინ-სისტემა: ღრმა შავი + სისხლის ალისფერი,
   ნამდვილი glass-ზედაპირები, ელევაციის სკალა, ზუსტი ტიპოგრაფია,
   მიკრო-ინტერაქციები. სელექტორები უცვლელია — მხოლოდ ვიზუალი.
   ========================================================= */
:root {
  /* პალიტრა — ღრმა და დახვეწილი (ნეონის ნაცვლად — ალისფერი სიღრმე) */
  --bg: #060608; --bg-2: #0b0b0f; --panel: #101014; --panel-2: #17171d; --border: #232329;
  --text: #f4f4f7; --text-dim: #8f919d;
  --blood: #a50d18; --blood-2: #e01b29; --blood-bright: #ff3d4a;
  --gold: #c41421; --gold-2: #ff4250; --gold-d: #6e0a12;
  --green: #2f9e57; --green-2: #4ade80;
  --health: #e01b29; --energy: #f0a932; --nerve: #8b7cff; --stamina: #38a8ec;
  --ink: #040406;
  --velvet: linear-gradient(165deg, #16161c 0%, #0d0d12 55%, #0a0a0e 100%);
  --sheen: linear-gradient(140deg, rgba(255,255,255,.055), rgba(255,255,255,0) 42%);
  --gold-glow: 0 0 30px rgba(224,27,41,.22);
  --shadow: 0 8px 28px rgba(0,0,0,.55);
  --shadow-lg: 0 30px 80px rgba(0,0,0,.72);
  --el-1: 0 2px 8px rgba(0,0,0,.4);
  --el-2: 0 8px 24px rgba(0,0,0,.5);
  --el-3: 0 18px 48px rgba(0,0,0,.62);
  --glass: rgba(16,16,21,.78);
  --glass-border: rgba(255,255,255,.09);
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.07);
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px;
}

/* ---- ფონი: ღრმა კინო-გრადიენტი ---- */
body {
  background:
    radial-gradient(1300px 760px at 50% -14%, rgba(224,27,41,.075), transparent 62%),
    radial-gradient(1000px 660px at 105% 110%, rgba(224,27,41,.05), transparent 58%),
    radial-gradient(800px 500px at -8% 30%, rgba(70,20,90,.05), transparent 55%),
    var(--ink);
  background-attachment: fixed;
}

/* ---- ტიპოგრაფია: ციფრები — tabular (არ "ხტება" განახლებისას) ---- */
.k-val, .jail-timer, .cur-val, .hp-num, .stat-top b, .story-goal b, .table td, .rank-num, .hud-lvl
  { font-variant-numeric: tabular-nums; }
.page-title, .card-title, .modal-title, .battle-head, .win-title, .bot-name { letter-spacing: .2px; }

/* ---- ღილაკები: თანამედროვე, მკაფიო მდგომარეობებით ---- */
.btn {
  border-radius: 12px; font-weight: 700; letter-spacing: .25px;
  background: linear-gradient(180deg, #1d1d24, #15151b);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: var(--el-1), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .16s var(--ease), filter .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.16); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(224,27,41,.45); }
.btn:disabled { box-shadow: none; transform: none; }
.btn-gold {
  background: linear-gradient(180deg, #ff3340 0%, #c41421 100%);
  border-color: rgba(255,120,130,.35); color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  box-shadow: 0 6px 18px rgba(224,27,41,.32), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-gold:hover { box-shadow: 0 10px 28px rgba(224,27,41,.46), inset 0 1px 0 rgba(255,255,255,.25); filter: brightness(1.06); }
.btn-blood {
  background: linear-gradient(180deg, #e01b29, #8f0c16);
  border-color: rgba(255,90,100,.3);
  box-shadow: 0 6px 18px rgba(224,27,41,.26), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-green {
  background: linear-gradient(180deg, #34b364, #1f7a43);
  border-color: rgba(120,255,170,.25);
  box-shadow: 0 6px 18px rgba(47,158,87,.26), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.12); box-shadow: none; }
.btn-ghost:hover { background: rgba(255,255,255,.05); }

/* ---- ბარათები ---- */
.card {
  background: var(--velvet);
  border: 1px solid rgba(255,255,255,.065);
  border-radius: var(--r-lg);
  box-shadow: var(--el-2), var(--glass-hi);
}
.kpi {
  background: linear-gradient(180deg, #16161d, #0e0e13);
  border: 1px solid rgba(255,255,255,.055);
  border-radius: var(--r-md);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.kpi:hover { border-color: rgba(224,27,41,.3); transform: translateY(-1px); }

/* ---- ფილები ---- */
.tile {
  background: linear-gradient(178deg, #17171e 0%, #0e0e13 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-md);
  box-shadow: var(--el-1);
}
.tile:hover {
  transform: translateY(-5px);
  border-color: rgba(224,27,41,.45);
  box-shadow: 0 20px 44px rgba(0,0,0,.6), var(--gold-glow);
}
.tile-img { border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 4px 14px rgba(0,0,0,.4); }

/* ---- chips ---- */
.chip {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  font-weight: 600;
}

/* ---- HUD: ნამდვილი ფანტელი მინა ---- */
.hud-tl, .hud-tc, .hud-tr {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--el-2), var(--glass-hi);
}
.avatar-ring { box-shadow: 0 0 0 1px rgba(0,0,0,.8) inset, 0 0 18px rgba(224,27,41,.3); }
.hud-lvl { background: linear-gradient(180deg, var(--blood-2), #8f0c16); box-shadow: 0 2px 8px rgba(224,27,41,.4); }
.hud-id .user-rank { color: var(--blood-bright); letter-spacing: .3px; }
.hud-cur .cur {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
}
.hud-cur .cur:hover { background: rgba(255,255,255,.08); border-color: rgba(224,27,41,.5); }

/* ---- რესურს-ზოლები ---- */
.bar { height: 7px; border-radius: 8px; background: rgba(0,0,0,.65); border: none; box-shadow: inset 0 1px 3px rgba(0,0,0,.8); }
.bar > span { border-radius: 8px; box-shadow: 0 0 8px rgba(255,255,255,.12); }
.bar.health  > span { background: linear-gradient(90deg, #8f0c16, #ff3d4a); }
.bar.energy  > span { background: linear-gradient(90deg, #a06a14, #ffc14d); }
.bar.nerve   > span { background: linear-gradient(90deg, #5546c8, #a89aff); }
.bar.stamina > span { background: linear-gradient(90deg, #1d6fa3, #5cc3ff); }
.mini-bar { border-radius: 8px; background: rgba(0,0,0,.65); }
.mini-bar > span { border-radius: 8px; }

/* ---- ქვედა dock ---- */
.action-bar {
  bottom: 14px; padding: 9px 12px; border-radius: var(--r-xl);
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(224,27,41,.35);
  box-shadow: 0 20px 50px rgba(0,0,0,.7), 0 0 32px rgba(224,27,41,.12), var(--glass-hi);
}
.action-bar .bn-item { border-radius: 13px; }
.action-bar .bn-item:hover { transform: translateY(-3px); }
.action-bar .bn-item:hover .bn-ico { transform: scale(1.1); }
.action-bar .bn-item.active {
  background: linear-gradient(180deg, rgba(224,27,41,.38), rgba(224,27,41,.1));
  box-shadow: inset 0 0 0 1px rgba(255,90,100,.5), 0 4px 14px rgba(224,27,41,.25);
}
.action-bar .bn-ico { transition: transform .22s var(--ease); }

/* ---- ფანჯრის პანელი ---- */
.window-root { background: rgba(3,3,5,.7); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); }
.win-panel {
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.09); border-top: none;
  background: linear-gradient(180deg, #131318 0%, #0b0b0f 100%);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,.6);
}
.win-panel .page-head, .win-head, .chat-head {
  background: linear-gradient(160deg, #d2192c 0%, #a00f1c 55%, #740a14 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.3), 0 4px 18px rgba(160,15,28,.35);
}
.win-panel .page-head { border-top-left-radius: calc(var(--r-xl) - 1px); border-top-right-radius: calc(var(--r-xl) - 1px); }
.win, .modal-box, .battle {
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #131318, #0b0b0f);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: var(--shadow-lg), var(--glass-hi);
}
.win-x { border-radius: 10px; background: rgba(0,0,0,.32); transition: background .2s var(--ease), transform .15s var(--ease); }
.win-x:hover { background: rgba(0,0,0,.55); transform: scale(1.06); }

/* ---- მენიუ-ბადე ---- */
.menu-tile {
  background: linear-gradient(178deg, #16161d, #0e0e12);
  border: 1px solid rgba(255,255,255,.06); border-radius: var(--r-md);
}
.menu-tile:hover { border-color: rgba(224,27,41,.55); transform: translateY(-4px) scale(1.02); }
.menu-tile .ic { color: var(--blood-bright); filter: drop-shadow(0 2px 6px rgba(224,27,41,.4)); }

/* ---- რუკის წერტილები ---- */
.spot-img-wrap {
  border: 2px solid rgba(255,255,255,.85); border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.65), 0 0 0 3px rgba(224,27,41,.55), 0 0 18px rgba(224,27,41,.3);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.map-spot:hover .spot-img-wrap { box-shadow: 0 12px 30px rgba(0,0,0,.75), 0 0 0 3px var(--blood-bright), 0 0 26px rgba(224,27,41,.55); }
.spot-label {
  background: rgba(10,10,14,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(224,27,41,.6); border-radius: 22px;
  font-weight: 700; letter-spacing: .2px; color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.6);
}

/* ---- toast ---- */
.toast {
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--glass-border); border-left-width: 4px; border-radius: var(--r-md);
  box-shadow: var(--el-3);
}

/* ---- ცხრილი ---- */
.table th { position: sticky; top: 0; background: rgba(10,10,14,.92); backdrop-filter: blur(6px); z-index: 1; }
.table tr:hover td { background: rgba(255,255,255,.03); }
.table td, .table th { border-bottom-color: rgba(255,255,255,.06); }

/* ---- ფორმები ---- */
.input, .login-input, .qty {
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1); border-radius: 11px;
}
.input:focus, .login-input:focus { border-color: var(--blood-2); box-shadow: 0 0 0 3px rgba(224,27,41,.18); background: rgba(0,0,0,.55); }
.tab { border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.tab.active { background: linear-gradient(180deg, #ff3340, #c41421); color: #fff; border-color: rgba(255,120,130,.4); box-shadow: 0 4px 14px rgba(224,27,41,.35); }

/* ---- story-goal რიგები ---- */
.story-goal {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.story-goal:hover { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.05); }

/* ---- ფიდი ---- */
.feed li { background: rgba(255,255,255,.03); border-radius: var(--r-sm); border-left-width: 3px; }

/* ---- ბრძოლის ეკრანი ---- */
.battle-head { font-size: 19px; text-shadow: 0 2px 12px rgba(224,27,41,.5); }
.fighter { background: linear-gradient(178deg, #15151b, #0d0d11); border-radius: var(--r-md); }
.fighter.attack { border-color: var(--blood-bright); box-shadow: 0 0 24px rgba(224,27,41,.4); }
.battle-vs { font-size: 24px; text-shadow: 0 0 18px rgba(224,27,41,.7); animation: vsPulse 1.6s ease-in-out infinite; }
@keyframes vsPulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
.hpbar { height: 9px; border-radius: 8px; background: rgba(0,0,0,.7); }
.hpbar > span { border-radius: 8px; background: linear-gradient(90deg, #8f0c16, #ff3d4a); box-shadow: 0 0 10px rgba(224,27,41,.5); }

/* ---- chat ---- */
.chat-drawer {
  background: var(--glass); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(224,27,41,.35); border-radius: var(--r-lg);
}
.chat-msg { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; }
.chat-time { display: block; margin-top: 2px; font-size: 8px; color: var(--text-dim); opacity: .7; font-variant-numeric: tabular-nums; }
.chat-msg.has-mod { position: relative; padding-right: 38px; }
.chat-mod { position: absolute; top: 6px; right: 7px; border: none; width: 26px; height: 26px; border-radius: 7px;
  background: rgba(232,199,102,.16); color: var(--gold-2); cursor: pointer; font-size: 13px; line-height: 1; }
.chat-mod:active { background: rgba(232,199,102,.36); }
.chat-fab {
  background: linear-gradient(180deg, #e01b29, #8f0c16);
  border: 1px solid rgba(255,120,130,.4);
  box-shadow: 0 12px 32px rgba(0,0,0,.6), 0 0 24px rgba(224,27,41,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.chat-fab:hover { transform: translateY(-3px) scale(1.07); box-shadow: 0 16px 40px rgba(0,0,0,.7), 0 0 32px rgba(224,27,41,.5); }

/* ---- heat orb / zoom / guide-chip ---- */
.heat-orb {
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 26px rgba(0,0,0,.55), var(--glass-hi);
}
.zbtn {
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); box-shadow: var(--el-2), var(--glass-hi);
}
.zbtn:hover { border-color: var(--blood-2); }
.guide-chip {
  background: linear-gradient(180deg, #e01b29, #9c0e1a);
  border: 1px solid rgba(255,255,255,.25); border-radius: 24px;
  box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 22px rgba(224,27,41,.4);
}

/* ---- login ---- */
.login-screen {
  background:
    radial-gradient(900px 500px at 50% -8%, rgba(224,27,41,.14), transparent 60%),
    radial-gradient(760px 520px at 50% 118%, rgba(120,9,17,.2), transparent 60%),
    linear-gradient(180deg, #08080b, #040405);
}
.login-card {
  background: linear-gradient(170deg, #15151b 0%, #0b0b0f 70%);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(224,27,41,.07), var(--glass-hi);
}
.brand-blood { filter: drop-shadow(0 2px 0 #3e0205) drop-shadow(0 10px 30px rgba(224,27,41,.6)); }
.class-card { border-radius: var(--r-lg); background: linear-gradient(178deg, #15151b, #0c0c10); border: 1px solid rgba(255,255,255,.07); }
.class-card:hover { transform: translateY(-5px); border-color: rgba(224,27,41,.55); box-shadow: 0 18px 44px rgba(0,0,0,.6), var(--gold-glow); }
.class-card.sel { border-color: var(--blood-2); box-shadow: 0 0 0 3px rgba(224,27,41,.3), 0 18px 44px rgba(0,0,0,.6); }

/* ---- ჩაკეცვადი / packs / equip / jail ---- */
.collapse { border-radius: var(--r-md); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.pack { border-radius: var(--r-md); background: linear-gradient(178deg, #16161d, #0e0e12); border: 1px solid rgba(255,255,255,.07); transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.pack:hover { border-color: rgba(224,27,41,.5); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.5), var(--gold-glow); }
.equip-slot { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-sm); transition: border-color .2s var(--ease); }
.equip-slot:hover { border-color: rgba(255,255,255,.14); }
.jail-banner { border-radius: var(--r-lg); background: repeating-linear-gradient(90deg, #121217, #121217 14px, #0c0c10 14px, #0c0c10 28px); border: 1px solid rgba(255,255,255,.07); }
.jail-timer { text-shadow: 0 0 18px rgba(224,27,41,.5); }

/* ---- ვინეტი ---- */
.game-shell::after { background: radial-gradient(140% 110% at 50% 40%, transparent 58%, rgba(0,0,0,.42) 100%); }

/* ---- პატარა ეკრანებზე dock კომპაქტური ---- */
@media (max-width: 640px) {
  .action-bar { bottom: 10px; padding: 7px 9px; border-radius: 18px; }
}

/* =========================================================
   v4.1 — კომპაქტური ფანჯარა (kartulimafia-ს ვიწრო სვეტივით):
   ვიწრო პანელი + საკუთარი შიდა scroll + დაპატარავებული შიგთავსი
   ========================================================= */
.window-root { padding: 92px 16px 100px; align-items: flex-start; }
.win-panel {
  width: min(430px, 100%);
  max-height: calc(100vh - 200px);
  overflow-y: auto; overscroll-behavior: contain;
}
.win-panel .page-head { padding: 9px 12px; margin-bottom: 12px; position: sticky; top: 0; z-index: 5; }
.win-panel .page-title { font-size: 14.5px; }
.win-panel .page-title .ico .ic { width: 17px; height: 17px; }
.win-panel .page-sub { font-size: 11px; line-height: 1.45; }
.win-panel .win-x { width: 26px; height: 26px; }
.win-panel .card { padding: 11px; border-radius: var(--r-md); }
.win-panel .card + .card { margin-top: 10px; }
.win-panel .card-title { font-size: 13.5px; margin-bottom: 8px; }
.win-panel .grid-auto { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.win-panel .grid-2, .win-panel .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.win-panel .grid { gap: 8px; }
.win-panel .tile { padding: 8px; gap: 6px; border-radius: 12px; }
.win-panel .tile-name { font-size: 12.5px; }
.win-panel .tile-meta { font-size: 10.5px; }
.win-panel .tile-stats { gap: 4px; font-size: 11px; }
.win-panel .chip { padding: 2px 7px; font-size: 11px; }
.win-panel .btn { padding: 8px 11px; font-size: 12.5px; border-radius: 10px; }
.win-panel .btn-sm { padding: 5px 9px; font-size: 11.5px; }
.win-panel .kpis { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.win-panel .kpi { padding: 9px; }
.win-panel .kpi .k-val { font-size: 15px; }
.win-panel .kpi .k-label { font-size: 10.5px; }
.win-panel .note { font-size: 12px; }
.win-panel .story-goal { padding: 7px 10px; font-size: 12.5px; }
.win-panel .banner-img { max-height: 150px; }
.win-panel .page-head .win-x-route { display: flex; }
.win-panel .table th, .win-panel .table td { padding: 8px 8px; font-size: 12.5px; }
.win-panel .bot-av { width: 56px; height: 56px; }
.win-panel .bot-name { font-size: 15px; }
.win-panel .jail-timer { font-size: 26px; }
.win-panel .profile-av { width: 60px; height: 60px; }
.win-panel .field label { font-size: 12px; }
.win-panel .input { padding: 9px 11px; font-size: 14px; }
/* grid-ის შვილები content-ზე განიერები ვერ გახდებიან (qty input ბადეს ვეღარ „ახეთქებს") */
.grid > * { min-width: 0; }
.qty { width: 100%; }
/* პანელის scrollbar — თხელი */
.win-panel::-webkit-scrollbar { width: 6px; }
/* მობილურზე — თითქმის სრული სიგანე, მაგრამ მაინც კომპაქტური */
@media (max-width: 640px) {
  .window-root { padding: 148px 10px 96px; }
  .win-panel { max-height: calc(100vh - 250px); }
}

/* =========================================================
   ბანდის წევრების ბარათები (kartulimafia-ს სტილში)
   ========================================================= */
.member-cards { display: flex; flex-direction: column; gap: 10px; }
.member-card {
  background: linear-gradient(178deg, #17171e, #0e0e13);
  border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-md);
  padding: 13px; transition: border-color .2s var(--ease);
}
.member-card:hover { border-color: rgba(224,27,41,.4); }
.mc-head { display: flex; gap: 12px; align-items: center; }
.mc-av { position: relative; width: 56px; height: 56px; flex: none; }
.mc-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid rgba(224,27,41,.55); box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.mc-lvl {
  position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #ffab2e, #e06910); color: #fff;
  font-size: 10.5px; font-weight: 800; padding: 1px 8px; border-radius: 8px;
  border: 1px solid rgba(0,0,0,.45); box-shadow: 0 2px 6px rgba(0,0,0,.5);
  font-variant-numeric: tabular-nums;
}
.mc-info { flex: 1; min-width: 0; }
.mc-name { font-weight: 800; font-size: 15.5px; }
.mc-id { color: var(--text-dim); font-weight: 600; font-size: 12px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.mc-chips { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.mc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07);
}
.mc-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mc-stat span { font-size: 10.5px; color: var(--text-dim); }
.mc-stat b { font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* =========================================================
   🥚 სასიყვარულო წერილი (1600-იანების პერგამენტი)
   ========================================================= */
.love-letter { width: min(380px, 92vw); animation: llDrop .6s var(--ease) both; }
@keyframes llDrop { from { opacity: 0; transform: translateY(-40px) rotate(4deg) scale(.92); } to { opacity: 1; transform: none; } }
.ll-paper {
  position: relative; padding: 34px 28px 50px; text-align: center; color: #3b2a16;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(120,80,30,.16), transparent 60%),
    radial-gradient(140% 100% at 50% 100%, rgba(90,55,20,.22), transparent 55%),
    radial-gradient(60% 40% at 12% 88%, rgba(110,70,25,.25), transparent 70%),
    radial-gradient(50% 35% at 90% 10%, rgba(110,70,25,.2), transparent 70%),
    linear-gradient(160deg, #f3e6c5 0%, #e8d5a8 48%, #d9c08a 100%);
  border-radius: 8px 16px 10px 18px / 14px 8px 18px 10px;
  box-shadow: 0 28px 64px rgba(0,0,0,.75), inset 0 0 64px rgba(120,80,30,.35), inset 0 0 8px rgba(80,50,15,.25);
  transform: rotate(-1.4deg);
}
.ll-paper::before {
  content: ""; position: absolute; inset: 9px;
  border: 1px solid rgba(110,70,25,.4); border-radius: inherit; pointer-events: none;
}
.ll-flourish { font-size: 30px; color: #8a5a1e; line-height: 1; }
.ll-date {
  font-family: "Sylfaen", Georgia, serif; font-style: italic;
  font-size: 12.5px; color: #7a5524; letter-spacing: 3px; margin-top: 8px; text-transform: uppercase;
}
.ll-text {
  font-family: "Sylfaen", "Noto Sans Georgian", Georgia, serif; font-style: italic;
  font-size: 27px; font-weight: 700; line-height: 1.45; margin: 24px 4px 18px;
  color: #46301a; text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.ll-sign { font-family: "Sylfaen", Georgia, serif; font-style: italic; font-size: 14px; color: #7a5524; }
.ll-seal {
  position: absolute; right: 20px; bottom: 14px; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #e0414e, #8f0c16 72%);
  color: rgba(255,235,235,.9); font-weight: 800; font-size: 12px; letter-spacing: 1px;
  box-shadow: 0 5px 12px rgba(0,0,0,.45), inset 0 2px 4px rgba(255,255,255,.3), inset 0 -4px 8px rgba(0,0,0,.35);
  transform: rotate(9deg);
}
.ll-seal::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(190,30,45,.5), rgba(110,10,20,.55) 75%);
  z-index: -1; filter: blur(1px);
}

/* =========================================================
   v30 — თბილისის უბნების რუკა + იზომეტრიული უბნის ხედი
   (ბექას მეგობრის რუკა, ჩვენს შავ-სისხლისფერ თემაზე მორგებული)
   ========================================================= */
/* --- ქალაქის ხედი --- */
.map-inner.city-mode { background: #050505; }
.city-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .8; filter: grayscale(70%) sepia(40%) contrast(120%) brightness(.42);
}
.city-scanlines {
  position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,.15) 50%);
  background-size: 100% 4px;
}
.city-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 150px rgba(0,0,0,.95); }
#city-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.city-path { cursor: pointer; transition: fill .15s ease, stroke .15s ease; }
.city-path:hover { fill-opacity: .85; stroke-width: 2.5; }
.city-label {
  font-family: "Rubik", "Noto Sans Georgian", sans-serif; font-weight: 800; letter-spacing: 2px;
  pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.98));
}
.city-title { position: absolute; left: 76px; bottom: 158px; z-index: 20; pointer-events: none; }
.city-title .ct-top { font-size: 11px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--blood-2); }
.city-title .ct-name { font-size: 30px; font-weight: 900; letter-spacing: .1em; color: #e0e0e0; text-shadow: 2px 2px 0 #000; line-height: 1.1; }
.city-title .ct-sub { font-size: 10px; color: #888; letter-spacing: .2em; border-left: 2px solid var(--blood-2); padding-left: 7px; margin-top: 4px; }

/* --- უბნის ინფო-პანელი --- */
#city-panel { position: absolute; right: 14px; bottom: 96px; z-index: 30; width: min(282px, calc(100vw - 28px)); }
.city-card {
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 13px 14px;
  background: linear-gradient(180deg, rgba(19,19,24,.95), rgba(9,9,12,.97));
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 16px 44px rgba(0,0,0,.65); position: relative;
  animation: fadeUp .22s ease; max-height: calc(100vh - 240px); overflow-y: auto;
}
.cp-x { position: absolute; top: 8px; right: 9px; width: 24px; height: 24px; border: none; background: rgba(255,255,255,.07); border-radius: 50%; color: var(--text-dim); font-size: 11px; }
.cp-x:hover { background: rgba(216,64,47,.3); color: #fff; }
.cp-kicker { font-size: 9.5px; letter-spacing: .2em; color: #777; text-transform: uppercase; margin-bottom: 2px; }
.cp-name { font-size: 19px; font-weight: 900; letter-spacing: .04em; margin-bottom: 6px; }
.cp-flavor { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 10px; }
.cp-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 11.5px; }
.cp-row span { color: #777; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; }
.cp-gold { color: var(--gold-2, #e7c569); font-weight: 800; }
.cp-free { color: #9fb3a6; font-weight: 800; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); padding: 1px 8px; border-radius: 12px; font-size: 10.5px; }
.cp-note { font-size: 10px; color: #6e6a62; line-height: 1.4; margin: 7px 0 10px; }
.cp-venues { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cp-venue {
  display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 11px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text);
  font-size: 12.5px; font-weight: 700; text-align: left; transition: border-color .15s ease, background .15s ease;
}
.cp-venue:hover { border-color: rgba(216,64,47,.55); background: rgba(216,64,47,.1); }
.cp-venue img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; }
.cp-venue span { flex: 1; }
.cp-venue i { font-style: normal; color: var(--blood-2); font-weight: 900; font-size: 16px; }
.cp-enter { margin-top: 2px; }

/* --- უბნის იზომეტრიული ხედი --- */
.iso-stage { position: absolute; inset: 0; overflow: hidden; background: #0a0908; cursor: grab; touch-action: none; }
.iso-stage:active { cursor: grabbing; }
.iso-dots {
  position: absolute; inset: 0; pointer-events: none; opacity: .2;
  background-image: radial-gradient(rgba(192,57,43,.15) 1px, transparent 1px);
  background-size: 24px 24px;
}
.iso-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform .07s linear; will-change: transform; }
.iso-venue { cursor: pointer; }
.iso-venue:hover { filter: url(#building-shadow) brightness(1.35); }
.iso-vlabel { paint-order: stroke; stroke: rgba(0,0,0,.85); stroke-width: 3px; font-family: "Rubik", "Noto Sans Georgian", sans-serif; }
.iso-back {
  position: absolute; left: 14px; top: 96px; z-index: 30;
  padding: 9px 16px; border-radius: 14px; font-weight: 800; font-size: 13px; color: #fff;
  border: 1px solid rgba(230,18,31,.45); background: linear-gradient(180deg, rgba(22,22,28,.92), rgba(8,8,11,.95));
  backdrop-filter: blur(10px); box-shadow: 0 10px 28px rgba(0,0,0,.55);
}
.iso-back:hover { border-color: var(--blood-2); transform: translateY(-1px); }
.iso-banner {
  position: absolute; right: 14px; bottom: 96px; z-index: 30; pointer-events: none;
  border: 1px solid rgba(255,255,255,.12); border-left: 3px solid var(--blood-2);
  border-radius: 12px; padding: 9px 13px;
  background: linear-gradient(180deg, rgba(19,19,24,.93), rgba(9,9,12,.95));
  backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 2px;
}
.iso-banner b { font-size: 15.5px; font-weight: 900; letter-spacing: .04em; }
.iso-banner span { font-size: 10.5px; color: var(--text-dim); letter-spacing: .04em; }

@media (max-width: 640px) {
  .city-title { bottom: 158px; left: 12px; }
  .city-title .ct-name { font-size: 22px; }
  #city-panel { right: 8px; left: 8px; width: auto; bottom: 92px; }
  .city-card { max-height: calc(100vh - 330px); }
  .city-label { font-size: 17px; }
  .iso-back { top: 150px; }
  .iso-banner { right: 8px; bottom: 92px; }
}

/* v30.1 — ქალაქის ფონი: ოპერატიული რუკის ქაღალდი (map.jpg აღარ გამოიყენება) */
.city-coord { font-family: monospace; font-size: 12px; fill: rgba(190,160,90,.28); letter-spacing: .1em; }
.map-inner.city-mode { background: radial-gradient(1100px 600px at 55% 40%, #11100d 0%, #0a0908 70%, #060605 100%); }

/* v30.2 — ქალაქის ფონის ვარიანტები (ფოტო Wikimedia-დან) + გადამრთველი */
.city-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(65%) sepia(30%) contrast(118%) brightness(.5);
}
.city-photo.sar {
  transform: scale(1.5);
  filter: grayscale(100%) invert(1) contrast(130%) brightness(.62);
}
.city-bgsw {
  position: absolute; left: 14px; top: 96px; z-index: 21;
  display: flex; gap: 5px;
}
.bgsw-btn {
  padding: 4px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 700;
  color: var(--text-dim); border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(22,22,28,.88), rgba(8,8,11,.92));
  backdrop-filter: blur(8px); transition: all .15s ease;
}
.bgsw-btn:hover { color: #fff; border-color: rgba(216,64,47,.5); }
.bgsw-btn.on { color: #fff; border-color: var(--blood-2); background: linear-gradient(180deg, #7d1422, #4f0c15); }
@media (max-width: 640px) {
  .city-bgsw { top: 150px; left: 10px; flex-wrap: wrap; max-width: 70vw; }
}

/* =========================================================
   v31 — მობილური ოპტიმიზაცია
   1) ფანჯრის/პანელის გახსნისას მცურავი ღილაკები აღარ ედება კონტენტს
   2) თითზე სწრაფი რეაქცია (double-tap zoom-ის გარეშე), მოლურჯო ციმციმის მოხსნა
   3) 100dvh — ტელეფონის ბრაუზერის მისამართის ზოლი ფანჯარას აღარ ჭრის
   ========================================================= */
button, .btn, .tile, .bn-item, .tab, .map-spot, .city-path, .cp-venue { touch-action: manipulation; }
html, body { -webkit-tap-highlight-color: rgba(0,0,0,0); }

@supports (height: 100dvh) {
  .win-panel { max-height: calc(100dvh - 200px); }
  .city-card { max-height: calc(100dvh - 240px); }
}

@media (max-width: 640px) {
  @supports (height: 100dvh) {
    .win-panel { max-height: calc(100dvh - 250px); }
    .city-card { max-height: calc(100dvh - 330px); }
  }
  /* გახსნილი ფანჯარა/პანელი: heat-ორბი, გზამკვლევის chip და zoom იმალება */
  body.win-open .heat-orb, body.win-open .guide-chip, body.win-open .map-zoom, body.win-open .chat-fab,
  body.citypanel-open .heat-orb, body.citypanel-open .guide-chip, body.citypanel-open .map-zoom, body.citypanel-open .chat-fab { display: none !important; }
  /* ქალაქის სათაური ტელეფონზე ზედმეტია — ორბს ედებოდა */
  .city-title { display: none; }
  /* უბნის პანელი ყველა მცურავ ღილაკზე მაღლა */
  #city-panel { z-index: 75; }
  /* გზამკვლევის chip — ზევით, HUD-ის ქვეშ (ცენტრში ფანჯრებს ედებოდა) */
  .guide-chip { bottom: auto; top: 148px; }
  /* ჩატის ღილაკი ქვედა ბარს ედებოდა — ავწიეთ */
  .chat-fab { bottom: 78px; right: 10px; width: 48px; height: 48px; }
  .chat-fab .ic { width: 22px; height: 22px; }
}

/* მობილურზე toast-ები ქვედა ბარს ზემოთ (ედებოდა) */
@media (max-width: 640px) {
  .toast-wrap { bottom: 88px; right: 10px; left: 10px; align-items: flex-end; }
  .toast { max-width: 100%; }
}

/* =========================================================
   v35 — ნივთის ტიერები (ხარისხის ფერები) + გაძლიერების UI
   tier-1 მწვანე • tier-2 სტაფილოსფერი • tier-3 წითელი • tier-4 ოქროსფერი
   ========================================================= */
.item-tile { position: relative; }
/* v35.1 — მკვეთრი მანათობელი კანტები (Beka: „ისე უნდა ჩანდეს, თითქოს ანათებს") */
.tile.tier-1 { border: 2px solid #46e07c; box-shadow: 0 0 9px rgba(70,224,124,.65), 0 0 26px rgba(70,224,124,.28), inset 0 0 14px rgba(70,224,124,.14); background: linear-gradient(178deg, rgba(70,224,124,.12), rgba(14,14,19,0) 50%), linear-gradient(178deg, #17171e, #0e0e13); }
.tile.tier-2 { border: 2px solid #ff8c3a; box-shadow: 0 0 9px rgba(255,140,58,.65), 0 0 26px rgba(255,140,58,.3),  inset 0 0 14px rgba(255,140,58,.15); background: linear-gradient(178deg, rgba(255,140,58,.13), rgba(14,14,19,0) 50%), linear-gradient(178deg, #17171e, #0e0e13); }
.tile.tier-3 { border: 2px solid #ff3b2a; box-shadow: 0 0 10px rgba(255,59,42,.7),  0 0 30px rgba(255,59,42,.32), inset 0 0 14px rgba(255,59,42,.16); background: linear-gradient(178deg, rgba(255,59,42,.14),  rgba(14,14,19,0) 50%), linear-gradient(178deg, #17171e, #0e0e13); }
.tile.tier-4 { border: 2px solid #ffd564; box-shadow: 0 0 11px rgba(255,213,100,.75), 0 0 34px rgba(255,213,100,.35), inset 0 0 16px rgba(255,213,100,.18); background: linear-gradient(178deg, rgba(255,213,100,.15), rgba(14,14,19,0) 50%), linear-gradient(178deg, #17171e, #0e0e13); animation: tier4glow 2.4s ease-in-out infinite; }
@keyframes tier4glow {
  0%, 100% { box-shadow: 0 0 11px rgba(255,213,100,.75), 0 0 34px rgba(255,213,100,.35), inset 0 0 16px rgba(255,213,100,.18); }
  50%      { box-shadow: 0 0 16px rgba(255,213,100,.95), 0 0 48px rgba(255,213,100,.5),  inset 0 0 20px rgba(255,213,100,.26); }
}
@media (prefers-reduced-motion: reduce) { .tile.tier-4 { animation: none; } }

/* გაძლიერების ბეჯი ქარდის კუთხეში */
.up-badge {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  font-size: 11px; font-weight: 900; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 10px;
  background: rgba(8,8,11,.92); border: 1px solid;
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.up-d { font-style: normal; font-size: 10px; opacity: .75; }
.it-act { flex: none !important; min-width: 40px; }

/* ნივთის ფანჯარა */
.item-box { position: relative; }
.item-box.tier-1 { border-top: 3px solid #46e07c; box-shadow: var(--shadow-lg), 0 -6px 24px rgba(70,224,124,.25); }
.item-box.tier-2 { border-top: 3px solid #ff8c3a; box-shadow: var(--shadow-lg), 0 -6px 24px rgba(255,140,58,.28); }
.item-box.tier-3 { border-top: 3px solid #ff3b2a; box-shadow: var(--shadow-lg), 0 -6px 24px rgba(255,59,42,.3); }
.item-box.tier-4 { border-top: 3px solid #ffd564; box-shadow: var(--shadow-lg), 0 -6px 24px rgba(255,213,100,.32); }
.tier-tag { font-size: 12px; font-weight: 800; letter-spacing: .04em; margin-left: 6px; }
.item-view { display: flex; gap: 14px; margin: 10px 0 14px; align-items: flex-start; }
.item-img { width: 132px; height: 132px; object-fit: cover; border-radius: 12px; flex: none; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.item-facts { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.if-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.if-row span { color: var(--text-dim); font-size: 12px; }
.if-row .g { color: var(--green-2); }

/* =========================================================
   v38 — ფიქსები
   1) რეიტინგის ცხრილი: ვიწრო ფანჯარაში (430px/ტელეფონი) #ID და დონე
      ერთმანეთს აღარ ედება — table-layout:fixed + ellipsis
   2) ქალაქის პანელი zoom-ის გარეთაა (city.js) — აქ მხოლოდ overlay-ების pointer-events
   ========================================================= */
.win-panel .table { table-layout: fixed; width: 100%; }
.win-panel .table th:nth-child(1), .win-panel .table td:nth-child(1) { width: 24px; }
.win-panel .table th:nth-child(2), .win-panel .table td:nth-child(2) { width: 33%; }
.win-panel .table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-user { min-width: 0; flex-wrap: wrap; row-gap: 0; }
.rank-user b { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-user .mc-id { flex: none; }
/* overlay-ები რუკაზე კლიკს არ უშლიან */
.city-scanlines, .city-vignette { pointer-events: none; }

/* ტელეფონზე რეიტინგის „რანგი" სვეტი იმალება — ქონებას ადგილი რჩება */
@media (max-width: 640px) {
  .win-panel .table th:nth-child(4), .win-panel .table td:nth-child(4) { display: none; }
}

/* =========================================================
   v43 — ⚡ ტურბო ვარჯიში (kartulimafia-ს სტილის ჩამოშლადი)
   ========================================================= */
.turbo-dd { margin-top: 8px; }
.turbo-dd summary {
  cursor: pointer; list-style: none; text-align: center;
  padding: 8px 12px; border-radius: 10px; font-weight: 800; font-size: 12.5px; color: #d6f5dc;
  background: linear-gradient(180deg, #2e6b3e, #17402284);
  border: 1px solid rgba(95,208,122,.45);
  box-shadow: 0 0 10px rgba(95,208,122,.15), inset 0 1px 0 rgba(255,255,255,.12);
  transition: filter .15s ease;
}
.turbo-dd summary:hover { filter: brightness(1.15); }
.turbo-dd summary::-webkit-details-marker { display: none; }
.turbo-dd summary::after { content: " ▾"; opacity: .7; }
.turbo-dd[open] summary::after { content: " ▴"; }
.turbo-btn {
  margin-top: 6px; display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(180deg, #245232, #112b1a) !important;
  border: 1px solid rgba(95,208,122,.35) !important; color: #cdebd4 !important;
  font-size: 12px !important;
}
.turbo-btn:hover { filter: brightness(1.2); }
.turbo-price { display: inline-flex; gap: 5px; align-items: center; }
.turbo-price s { opacity: .55; font-size: 11px; }
.turbo-price b { color: #ffd564; }

/* =========================================================
   v49 — მოთამაშის პროფილ-მოდალი + პირადი წერილები
   ========================================================= */
.pl-modal { position: relative; }
.pl-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; }
.pl-av { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--blood-2); }
.pl-id { min-width: 0; }
.pl-name { font-size: 20px; font-weight: 900; letter-spacing: .02em; }
.pl-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.pl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl-actions .btn { font-size: 13px; }
.pl-link { display: block; }
.pl-link:hover .tile-name, .rank-row.pl-link:hover b { color: var(--gold-2); }

/* thread / პირადი წერილების ბუშტები */
.chat-msg.mine { text-align: right; }
.chat-msg.mine b { color: var(--gold-2); }