/* =========================================================
   MYU - Arayüz stilleri
   ========================================================= */
:root {
  --ink: #0b0f1c;
  --ink-2: #141a2c;
  --bone: #e9e2cf;
  --bone-dim: #a9a292;
  --bronze: #b8893a;
  --gold: #e6bf5a;
  --teal: #45d8c8;
  --blood: #c9403f;
  --xp: #7fb2ff;
  --plaque: linear-gradient(180deg, rgba(28,34,56,.94), rgba(14,18,32,.94));
  --plaque-border: rgba(184,137,58,.55);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--ink); color: var(--bone); font-family: 'Manrope', system-ui, sans-serif; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }

/* ---------- Plakalar ---------- */
.plaque {
  position: absolute;
  background: var(--plaque);
  border: 1px solid var(--plaque-border);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius: 6px;
  backdrop-filter: blur(6px);
}
.plaque::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7;
}

.plaque-hero { left: 12px; top: calc(12px + var(--safe-top)); display: flex; gap: 10px; align-items: center; padding: 8px 12px 8px 8px; min-width: 190px; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #4a3a2a, #1a1410 70%);
  border: 2px solid var(--bronze); box-shadow: 0 0 10px rgba(230,191,90,.25);
}
.hero-info { flex: 1; min-width: 0; }
.hero-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--gold); display: flex; justify-content: space-between; gap: 8px; }
.hero-name span { color: var(--bone); font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px; }
.hero-name #hud-name { color: var(--gold); font-family: 'Cinzel', serif; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }

.bar { position: relative; height: 10px; background: rgba(0,0,0,.55); border-radius: 3px; overflow: hidden; margin-top: 5px; border: 1px solid rgba(0,0,0,.6); }
.bar .fill { height: 100%; width: 0%; transition: width .25s ease-out; }
.bar.xp .fill { background: linear-gradient(90deg, #3b6fd6, var(--xp)); }
.bar-text { position: absolute; inset: 0; font-size: 8px; line-height: 9px; text-align: center; color: #fff; text-shadow: 0 1px 1px #000; font-weight: 700; }

.plaque-map { left: 50%; top: calc(12px + var(--safe-top)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px 6px; }
.map-info { text-align: center; min-width: 120px; }
.map-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px; color: var(--bone); letter-spacing: .05em; white-space: nowrap; }
.map-tier { font-size: 11px; font-weight: 700; color: var(--teal); }
.nav-btn {
  width: 30px; height: 34px; border: 1px solid var(--plaque-border); border-radius: 4px;
  background: rgba(0,0,0,.35); color: var(--gold); font-size: 22px; line-height: 1; cursor: pointer; font-family: serif;
}
.nav-btn:disabled { opacity: .25; cursor: default; }
.nav-btn:not(:disabled):active { background: rgba(230,191,90,.2); }

.plaque-res { right: 12px; top: calc(12px + var(--safe-top)); padding: 6px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; }
.res { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ico { width: 14px; height: 14px; border-radius: 3px; flex: none; display: inline-block; }
.ico-yang { background: radial-gradient(circle at 40% 35%, #ffe9a0, #c9982e 60%, #7d5a14); border-radius: 50%; }
.ico-chest { background: linear-gradient(180deg, #a06a2c, #5c3a12); border: 1px solid #d9a24a; }
.ico-dps { background: linear-gradient(135deg, #ff7d5a, #b3261e); clip-path: polygon(50% 0, 100% 60%, 70% 100%, 30% 100%, 0 60%); }
.ico-gs { background: linear-gradient(135deg, #8ec5ff, #3268c9); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ---------- Alt menü ---------- */
.bottom-nav {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 8px calc(8px + var(--safe-bottom));
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  background: linear-gradient(180deg, transparent, rgba(5,7,14,.85) 40%);
}
.bottom-nav button {
  background: var(--plaque); border: 1px solid var(--plaque-border); border-radius: 6px;
  color: var(--bone-dim); padding: 8px 2px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: inherit;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
.bottom-nav button span { font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.bottom-nav button .nav-ico { font-style: normal; font-size: 18px; line-height: 1; color: var(--gold); }
.bottom-nav button:active, .bottom-nav button.active { color: var(--bone); border-color: var(--gold); background: linear-gradient(180deg, rgba(60,50,30,.95), rgba(20,18,26,.95)); }
.bottom-nav button .badge { position: absolute; }

/* ---------- Bildirimler ---------- */
#toasts { position: absolute; left: 50%; top: calc(72px + var(--safe-top)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: max-content; max-width: 90vw; }
.toast {
  background: var(--plaque); border: 1px solid var(--plaque-border); border-radius: 4px;
  padding: 6px 14px; font-size: 12px; font-weight: 700; color: var(--bone);
  box-shadow: 0 6px 18px rgba(0,0,0,.5); animation: toast-in .25s ease-out;
}
.toast.gold { color: var(--gold); }
.toast.teal { color: var(--teal); }
.toast.fade { opacity: 0; transition: opacity .5s; }
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .plaque-hero { min-width: 0; padding: 6px 8px 6px 6px; }
  .avatar { width: 34px; height: 34px; }
  .hero-name { font-size: 12px; }
  .plaque-map { top: calc(64px + var(--safe-top)); }
  #toasts { top: calc(118px + var(--safe-top)); }
  .map-info { min-width: 96px; }
  .map-name { font-size: 12px; }
  .plaque-res { padding: 5px 8px; gap: 2px 8px; }
  .res { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; } .bar .fill { transition: none; }
}

/* =========================================================
   Paneller
   ========================================================= */
.bottom-nav button { position: relative; }
.badge { position: absolute; top: -6px; right: -4px; background: var(--blood); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 9px; border: 1px solid #000; display: none; }

#panel {
  position: fixed; left: 50%; bottom: calc(66px + var(--safe-bottom)); transform: translate(-50%, 20px);
  width: min(560px, calc(100% - 16px)); max-height: calc(100% - 150px - var(--safe-top) - var(--safe-bottom));
  background: var(--plaque); border: 1px solid var(--plaque-border); border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 20px 50px rgba(0,0,0,.6);
  display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 5;
}
#panel.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(184,137,58,.3); }
.panel-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 16px; color: var(--gold); letter-spacing: .06em; }
#panel-close { background: none; border: 1px solid var(--plaque-border); color: var(--bone-dim); width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.panel-body { overflow-y: auto; padding: 12px 14px 16px; font-size: 13px; -webkit-overflow-scrolling: touch; }
.panel-body h3 { font-family: 'Cinzel', serif; font-size: 12px; color: var(--bronze); letter-spacing: .08em; margin: 14px 0 6px; }
.panel-body p.note { color: var(--bone-dim); font-size: 12px; line-height: 1.5; margin-bottom: 8px; }
.panel-body .empty-note { color: var(--bone-dim); font-size: 12px; padding: 12px; text-align: center; border: 1px dashed rgba(184,137,58,.3); border-radius: 6px; }
.panel-body small { display: block; color: var(--bone-dim); font-size: 11px; font-weight: 500; margin-top: 2px; line-height: 1.4; }
.panel-body .ok { color: #7fe0a0; } .panel-body .bad { color: #ff8a80; }

.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; }
.stat { background: rgba(0,0,0,.3); border-radius: 4px; padding: 5px 6px; display: flex; flex-direction: column; }
.stat span { font-size: 10px; color: var(--bone-dim); } .stat b { font-size: 13px; }
.mats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 6px; }
.mat { display: flex; gap: 6px; font-size: 12px; color: var(--bone-dim); } .mat b { color: var(--gold); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.item { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-left-width: 3px; border-radius: 5px; padding: 6px 8px; cursor: pointer; min-height: 62px; }
.item.common { border-left-color: #b8b8b8; } .item.rare { border-left-color: #4da3ff; } .item.epic { border-left-color: #b96bff; } .item.legendary { border-left-color: #ffb534; box-shadow: inset 0 0 14px rgba(255,181,52,.12); }
.item.sel { background: rgba(230,191,90,.12); border-color: var(--gold); }
.item.empty { opacity: .45; cursor: default; }
.item-slot { font-size: 10px; color: var(--bone-dim); } .item-name { font-weight: 700; font-size: 12px; margin: 2px 0; line-height: 1.2; }
.item-stat { font-size: 11px; color: var(--bone); } .item-score { font-size: 10px; color: var(--bone-dim); margin-top: 2px; }

.detail { background: rgba(0,0,0,.4); border: 1px solid var(--plaque-border); border-radius: 6px; padding: 10px 12px; margin: 8px 0; }
.detail-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; }
.detail-sub { font-size: 11px; color: var(--bone-dim); } .detail-stat { font-weight: 700; margin: 6px 0 2px; color: var(--teal); }
.detail-desc { font-size: 12px; color: var(--bone-dim); line-height: 1.4; }

.btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.btn-group { display: flex; gap: 4px; flex: none; }
.panel-body button {
  background: rgba(0,0,0,.4); border: 1px solid var(--plaque-border); color: var(--bone); border-radius: 5px;
  padding: 7px 10px; font: 700 12px 'Manrope', sans-serif; cursor: pointer; text-align: center; line-height: 1.2;
}
.panel-body button small { color: var(--bone-dim); font-size: 10px; margin-top: 1px; }
.panel-body button:disabled { opacity: .4; cursor: default; }
.panel-body button.primary { background: linear-gradient(180deg, #2b5f8a, #1a3a58); border-color: #4da3ff; }
.panel-body button.gold { background: linear-gradient(180deg, #7a5a1e, #4a3510); border-color: var(--gold); color: #ffe9a0; }
.panel-body button.danger { background: linear-gradient(180deg, #6a2a2a, #401616); border-color: var(--blood); }
.panel-body button:not(:disabled):active { filter: brightness(1.25); }

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.row > div:first-child { min-width: 0; flex: 1; } .row b { font-size: 13px; }
.lvl { color: var(--teal); font-size: 11px; margin-left: 4px; }
.result { margin-top: 12px; padding: 10px; background: rgba(230,191,90,.06); border: 1px solid rgba(230,191,90,.3); border-radius: 6px; }
.result-title { font-family: 'Cinzel', serif; color: var(--gold); font-weight: 700; margin-bottom: 4px; }
.result-line { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; margin-bottom: 8px; color: var(--teal); }

.ess-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ess-slot { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: 8px; text-align: center; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ess-slot .btn-group { flex-wrap: wrap; justify-content: center; } .ess-slot button { padding: 4px 6px; font-size: 10px; }
.ess-gem { width: 26px; height: 26px; transform: rotate(45deg); border-radius: 5px; background: #2a2f3a; border: 1px solid rgba(255,255,255,.1); }
.ess-slot.p1 .ess-gem { background: radial-gradient(#c96a3a, #6a2a1a); box-shadow: 0 0 8px #c96a3a; }
.ess-slot.p2 .ess-gem { background: radial-gradient(#4da3ff, #1a3a6a); box-shadow: 0 0 10px #4da3ff; }
.ess-slot.p3 .ess-gem { background: radial-gradient(#b96bff, #4a1a6a); box-shadow: 0 0 12px #b96bff; }
.ess-slot.p4 .ess-gem { background: radial-gradient(#ffe08a, #b8730a); box-shadow: 0 0 16px #ffb534; }

.map-row { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.map-row.locked { opacity: .5; } .map-head { margin-bottom: 6px; }
.map-row .btn-group button { flex: 1; }
.map-row .btn-group { display: flex; }

@media (max-width: 640px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .row { flex-wrap: wrap; } .row .btn-group { width: 100%; } .row .btn-group button { flex: 1; }
}

/* =========================================================
   Giriş / modal
   ========================================================= */
#auth { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 30%, #1c2340, var(--ink) 70%); }
#auth.hidden, .modal.hidden { display: none; }
.auth-box { width: min(360px, 100%); background: var(--plaque); border: 1px solid var(--plaque-border); border-radius: 8px; padding: 26px 22px 18px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 30px 60px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 10px; }
.auth-logo { font-family: 'Cinzel', serif; font-weight: 700; font-size: 44px; color: var(--gold); text-align: center; letter-spacing: .12em; text-shadow: 0 0 24px rgba(230,191,90,.35); line-height: 1; }
.auth-sub { text-align: center; font-size: 12px; color: var(--bone-dim); margin-bottom: 8px; }
.auth-tabs { display: flex; border: 1px solid var(--plaque-border); border-radius: 5px; overflow: hidden; }
.auth-tabs button { flex: 1; background: rgba(0,0,0,.35); border: 0; color: var(--bone-dim); padding: 9px; font: 700 12px 'Manrope', sans-serif; cursor: pointer; }
.auth-tabs button.active { background: rgba(230,191,90,.15); color: var(--gold); }
#auth input { background: rgba(0,0,0,.45); border: 1px solid var(--plaque-border); border-radius: 5px; color: var(--bone); padding: 11px 12px; font: 500 14px 'Manrope', sans-serif; outline: none; -webkit-user-select: text; user-select: text; }
#auth input:focus { border-color: var(--gold); }
.auth-err { min-height: 16px; font-size: 12px; color: #ff8a80; font-weight: 700; }
.auth-submit { background: linear-gradient(180deg, #7a5a1e, #4a3510); border: 1px solid var(--gold); color: #ffe9a0; border-radius: 5px; padding: 12px; font: 700 14px 'Manrope', sans-serif; cursor: pointer; }
.auth-submit:disabled { opacity: .5; cursor: default; }
.auth-hint { font-size: 11px; color: var(--bone-dim); text-align: center; }

.modal { position: fixed; inset: 0; z-index: 15; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { width: min(380px, 100%); background: var(--plaque); border: 1px solid var(--plaque-border); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.modal-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 20px; color: var(--gold); text-align: center; letter-spacing: .06em; }
.modal-body { font-size: 13px; line-height: 1.6; color: var(--bone); }
.modal-body b { color: var(--teal); }

#save-dot { position: absolute; left: 44px; top: calc(82px + var(--safe-top)); width: 8px; height: 8px; border-radius: 50%; background: #3a3a44; transition: background .3s; }
#save-dot.saving { background: var(--gold); } #save-dot.saved { background: #7fe0a0; } #save-dot.error { background: var(--blood); }

.pick-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.pick { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: 5px; padding: 8px; font-size: 12px; }
.pick.active { border-color: var(--teal); background: rgba(69,216,200,.08); }
.pick b { display: block; margin-bottom: 2px; } .pick button { margin-top: 6px; width: 100%; }

/* =========================================================
   Karakter silüeti, efsunlar, boss ödülleri
   ========================================================= */
.doll { position: relative; width: 100%; max-width: 330px; height: 340px; margin: 0 auto 10px; }
.doll-svg { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); height: 320px; width: auto; filter: drop-shadow(0 0 18px rgba(230,191,90,.12)); }
.dslot { position: absolute; width: 74px; height: 58px; background: rgba(0,0,0,.5); border: 1px solid rgba(184,137,58,.35); border-radius: 5px; padding: 4px 6px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.dslot span { font-size: 9px; color: var(--bone-dim); } .dslot b { font-size: 10px; line-height: 1.15; color: var(--rc, var(--bone)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dslot.empty { cursor: default; opacity: .55; align-items: center; }
.dslot:not(.empty) { border-color: var(--rc); box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 0 8px color-mix(in srgb, var(--rc) 35%, transparent); }
.dslot.sel { background: rgba(230,191,90,.18); }
.p-helmet   { left: 50%; top: 0; transform: translateX(-50%); }
.p-necklace { left: 0; top: 0; }       .p-earring  { right: 0; top: 0; }
.p-weapon   { left: 0; top: 70px; }    .p-shield   { right: 0; top: 70px; }
.p-armor    { left: 50%; top: 118px; transform: translateX(-50%); }
.p-bracelet { left: 0; top: 140px; }   .p-ring     { right: 0; top: 140px; }
.p-belt     { left: 50%; top: 188px; transform: translateX(-50%); }
.p-boots    { left: 50%; top: 276px; transform: translateX(-50%); }
@media (max-width: 380px) { .dslot { width: 66px; } }

.bonus { font-size: 10px; color: var(--teal); line-height: 1.35; }
.detail .bonus { font-size: 12px; }
.stat-strip { grid-template-columns: repeat(4, 1fr); }

.ess { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-left-width: 3px; border-radius: 5px; padding: 6px 8px; }
.ess-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 12px; }
.ess .ess-gem { width: 12px; height: 12px; }
.ess .btn-group { flex-wrap: wrap; margin-top: 6px; } .ess .btn-group button { padding: 4px 6px; font-size: 10px; flex: 1; }
.ess.p1 { border-left-color: #c96a3a; } .ess.p2 { border-left-color: #4da3ff; } .ess.p3 { border-left-color: #b96bff; } .ess.p4 { border-left-color: #ffb534; }
.ess.p1 .ess-gem { background: radial-gradient(#c96a3a, #6a2a1a); } .ess.p2 .ess-gem { background: radial-gradient(#4da3ff, #1a3a6a); }
.ess.p3 .ess-gem { background: radial-gradient(#b96bff, #4a1a6a); } .ess.p4 .ess-gem { background: radial-gradient(#ffe08a, #b8730a); }
.ess-slot b { font-size: 12px; } .ess-slot button { padding: 4px 8px; font-size: 10px; }

.boss-row { border-bottom: 1px solid rgba(255,255,255,.06); } .boss-row .row { border-bottom: 0; }
.drops { background: rgba(0,0,0,.3); border-radius: 5px; padding: 6px 10px; margin-bottom: 8px; }
.drop { display: flex; justify-content: space-between; font-size: 11px; padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
.drop:last-child { border-bottom: 0; } .drop b { color: var(--gold); }
@media (max-width: 640px) { .stat-strip { grid-template-columns: repeat(3, 1fr); } }

.tmats { display: flex; flex-direction: column; gap: 4px; }
.tmat { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; background: rgba(0,0,0,.3); border-radius: 4px; padding: 6px 10px; font-size: 11px; color: var(--bone-dim); }
.tmat > b { color: var(--bone); font-size: 12px; margin-right: 4px; } .tmat span b { color: var(--gold); margin-left: 3px; }
.result-line .hl { color: var(--gold); }
.ess.p5 { border-left-color: #ff6a6a; } .ess.p6 { border-left-color: #fff; }
.ess.p5 .ess-gem, .ess-slot.p5 .ess-gem { background: radial-gradient(#ff8a8a, #8a1a1a); box-shadow: 0 0 14px #ff6a6a; }
.ess.p6 .ess-gem, .ess-slot.p6 .ess-gem { background: radial-gradient(#ffffff, #8ab8ff); box-shadow: 0 0 18px #fff; }

/* =========================================================
   Panel v3: iki sütun
   ========================================================= */
#panel { width: min(900px, calc(100% - 16px)); height: calc(100% - 150px - var(--safe-top) - var(--safe-bottom)); max-height: none; }
.panel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; flex: 1; min-height: 0; }
.panel-col { overflow-y: auto; padding: 12px 14px 16px; font-size: 13px; -webkit-overflow-scrolling: touch; min-height: 0; }
.panel-col + .panel-col { border-left: 1px solid rgba(184,137,58,.25); }
.panel-col h3 { font-family: 'Cinzel', serif; font-size: 12px; color: var(--bronze); letter-spacing: .08em; margin: 12px 0 6px; }
.panel-col p.note { color: var(--bone-dim); font-size: 12px; line-height: 1.5; margin-bottom: 8px; }
.panel-col .empty-note { color: var(--bone-dim); font-size: 12px; padding: 14px; text-align: center; border: 1px dashed rgba(184,137,58,.3); border-radius: 6px; line-height: 1.5; }
.panel-col small { display: block; color: var(--bone-dim); font-size: 11px; font-weight: 500; margin-top: 2px; line-height: 1.4; }
.panel-col .ok { color: #7fe0a0; } .panel-col .bad { color: #ff8a80; }
.panel-col button {
  background: rgba(0,0,0,.4); border: 1px solid var(--plaque-border); color: var(--bone); border-radius: 5px;
  padding: 7px 10px; font: 700 12px 'Manrope', sans-serif; cursor: pointer; text-align: center; line-height: 1.2;
}
.panel-col button small { color: var(--bone-dim); font-size: 10px; margin-top: 1px; }
.panel-col button:disabled { opacity: .4; cursor: default; }
.panel-col button.primary { background: linear-gradient(180deg, #2b5f8a, #1a3a58); border-color: #4da3ff; }
.panel-col button.gold { background: linear-gradient(180deg, #7a5a1e, #4a3510); border-color: var(--gold); color: #ffe9a0; }
.panel-col button.danger { background: linear-gradient(180deg, #6a2a2a, #401616); border-color: var(--blood); }
.panel-col button:not(:disabled):active { filter: brightness(1.25); }
.btn-col { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.btn-col button { text-align: left; }
.stat-strip.two { grid-template-columns: 1fr 1fr; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tabs button { flex: 1; padding: 6px 4px; font-size: 11px; color: var(--bone-dim); white-space: nowrap; }
.tabs button.on { border-color: var(--gold); color: var(--gold); background: rgba(230,191,90,.12); }
.list { display: flex; flex-direction: column; gap: 3px; }
.lrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(0,0,0,.3); border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-size: 12px; }
.lrow span { color: var(--bone-dim); font-size: 11px; white-space: nowrap; }
.lrow.on { border-color: var(--gold); background: rgba(230,191,90,.1); }
.lrow.locked { opacity: .5; }
.lrow:not(.on):hover { background: rgba(0,0,0,.45); }
.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--bone-dim); }
.pager button { padding: 4px 12px; }
.ess { cursor: pointer; } .ess.sel { border-color: var(--gold); background: rgba(230,191,90,.12); }
.ess-head i { margin-left: auto; font-style: normal; font-size: 10px; color: var(--bone-dim); }
.drop span small { display: inline; color: var(--bone-dim); margin-left: 6px; }
.doll { height: 330px; max-width: 300px; }

@media (max-width: 700px) {
  #panel { height: calc(100% - 120px - var(--safe-top) - var(--safe-bottom)); bottom: calc(62px + var(--safe-bottom)); }
  .panel-cols { grid-template-columns: 1fr; overflow-y: auto; }
  .panel-col { overflow: visible; padding: 10px 12px; }
  .panel-col + .panel-col { border-left: 0; border-top: 1px solid rgba(184,137,58,.25); }
  .doll { height: 300px; max-width: 280px; }
  .dslot { width: 68px; height: 52px; }
  .p-weapon, .p-shield { top: 64px; } .p-bracelet, .p-ring { top: 128px; } .p-armor { top: 108px; } .p-belt { top: 170px; } .p-boots { top: 246px; }
  .lrow { padding: 10px; }
}

/* =========================================================
   Semboller, üst aksiyonlar, tek sütun panel
   ========================================================= */
.ic { width: 14px; height: 14px; flex: none; vertical-align: -2px; display: inline-block; }
.ic-stat { width: 18px; height: 18px; color: var(--gold); }
.ic-big { width: 20px; height: 20px; margin-right: 6px; }
.stat { flex-direction: row; align-items: center; gap: 7px; flex-wrap: wrap; }
.stat .ic-stat { color: var(--bronze); }
.stat span { flex: 1 1 60px; } .stat b { margin-left: auto; }
.bonus { display: flex; align-items: center; gap: 5px; } .bonus .ic { width: 12px; height: 12px; color: var(--teal); }
.detail-stat { display: flex; align-items: center; gap: 6px; }
.mat { align-items: center; } .mat .ic { color: var(--bronze); }
.dslot span { display: flex; align-items: center; gap: 4px; } .dslot span .ic { width: 11px; height: 11px; color: var(--bronze); }
.tmat span { display: inline-flex; align-items: center; gap: 4px; } .tmat .ic { color: var(--bronze); width: 12px; height: 12px; }
.drop span { display: flex; align-items: center; gap: 6px; } .drop .ic { color: var(--bronze); }
.pick b { display: flex; align-items: center; gap: 5px; } .pick .ic { color: var(--gold); }
.lrow-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.lrow.static { cursor: default; } .lrow .val { color: var(--gold); font-weight: 700; font-size: 13px; }
.row .lrow-main { flex: 1; }
.res .ic { color: var(--gold); width: 15px; height: 15px; }
.bottom-nav .nav-ico { width: 20px; height: 20px; color: var(--gold); }
.plaque-hero { cursor: pointer; }
.top-actions { position: absolute; right: 12px; top: calc(62px + var(--safe-top)); display: flex; gap: 6px; }
.top-actions button { width: 32px; height: 32px; border-radius: 5px; background: var(--plaque); border: 1px solid var(--plaque-border); color: var(--gold); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.top-actions button .ic { width: 17px; height: 17px; }
#gear-menu { position: absolute; right: 12px; top: calc(100px + var(--safe-top)); background: var(--plaque); border: 1px solid var(--plaque-border); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 170px; box-shadow: 0 10px 30px rgba(0,0,0,.6); z-index: 6; }
#gear-menu.hidden { display: none; }
#gear-menu button { background: rgba(0,0,0,.35); border: 1px solid transparent; color: var(--bone); border-radius: 4px; padding: 9px 10px; font: 700 12px 'Manrope', sans-serif; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 8px; }
#gear-menu button:hover { border-color: var(--plaque-border); }
#gear-menu .ic { color: var(--gold); }
#panel.single .panel-cols { grid-template-columns: 1fr; }
#panel.single #panel-right { display: none; }
#save-dot { left: 12px; top: calc(66px + var(--safe-top)); }
@media (max-width: 640px) {
  .top-actions { top: calc(58px + var(--safe-top)); }
  #gear-menu { top: calc(96px + var(--safe-top)); }
  .plaque-map { top: calc(100px + var(--safe-top)); }
  #toasts { top: calc(150px + var(--safe-top)); }
  #save-dot { top: calc(52px + var(--safe-top)); }
}

/* Renkli öz */
.ess-slots.five { grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ess-slots.five .ess-slot { padding: 6px 4px; font-size: 10px; gap: 4px; }
.ess-slots.five .ess-slot b { font-size: 10px; }
.ess-slots.five .ess-slot small { font-size: 9px; line-height: 1.3; }
.ess-slots.five .bonus { font-size: 9px; }
.ess-slot .ess-gem, .ess .ess-gem { background: radial-gradient(circle at 35% 30%, #fff8, var(--ec, #888) 45%, #000 120%); box-shadow: 0 0 10px var(--ec, transparent); border-color: var(--ec, rgba(255,255,255,.1)); }
.ess-slot.empty .ess-gem { opacity: .35; box-shadow: none; }
.ess { border-left-color: var(--ec) !important; }
.ess-head em { font-style: normal; font-size: 10px; }
.tabs.small button { flex: 0 1 auto; padding: 4px 8px; font-size: 10px; }
.tabs button .ic { width: 13px; height: 13px; }
@media (max-width: 700px) { .ess-slots.five { grid-template-columns: repeat(5, 1fr); } .ess-slots.five .ess-slot .bonus { display: none; } }
.ess-slot.p1 .ess-gem, .ess-slot.p2 .ess-gem, .ess-slot.p3 .ess-gem, .ess-slot.p4 .ess-gem, .ess-slot.p5 .ess-gem, .ess-slot.p6 .ess-gem,
.ess.p1 .ess-gem, .ess.p2 .ess-gem, .ess.p3 .ess-gem, .ess.p4 .ess-gem, .ess.p5 .ess-gem, .ess.p6 .ess-gem { background: radial-gradient(circle at 35% 30%, #fff8, var(--ec) 45%, #000 120%); box-shadow: 0 0 10px var(--ec); }
.ess.p4, .ess.p5, .ess.p6 { box-shadow: inset 0 0 14px color-mix(in srgb, var(--ec) 18%, transparent); }

/* Buff sembolleri + checkbox */
#buffs { position: absolute; left: 12px; top: calc(66px + var(--safe-top)); display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; }
.buff { display: flex; align-items: center; gap: 4px; background: var(--plaque); border: 1px solid var(--plaque-border); border-radius: 4px; padding: 3px 6px; font-size: 10px; font-weight: 700; color: var(--bone); cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.buff .ic { color: var(--teal); width: 13px; height: 13px; }
#save-dot { left: 4px; top: calc(58px + var(--safe-top)); width: 6px; height: 6px; }
.panel-col button.chk { width: 22px; height: 22px; padding: 0; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: transparent; flex: none; }
.panel-col button.chk.on { color: var(--gold); border-color: var(--gold); background: rgba(230,191,90,.15); }
.panel-col button.chk .ic { width: 14px; height: 14px; }
@media (max-width: 640px) { #buffs { top: calc(58px + var(--safe-top)); max-width: 150px; } #save-dot { top: calc(50px + var(--safe-top)); } }

.pick.locked { opacity: .6; } .pick .btn-group { flex-wrap: wrap; margin-top: 6px; } .pick .btn-group button { flex: 1; margin-top: 0; }

/* Market */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.shop-item { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.shop-head { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.shop-item small { flex: 1; }
.shop-item button { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.shop-item button .ic { color: #8ef0ff; }

.detail-mats { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 11px; color: var(--bone-dim); margin-top: 6px; }
.detail-mats .ic { color: var(--bronze); margin-right: 3px; } .detail-mats b { color: var(--gold); }
.panel-col button small .ic { width: 11px; height: 11px; color: var(--bronze); }

.panel-col button.busy { opacity: .6; pointer-events: none; }

/* Binek/pet v3 + geliştirme önizleme */
.detail-stat .next { color: var(--bone-dim); font-weight: 500; font-size: 11px; margin-left: 4px; }
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.comp { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: 7px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.comp.locked { opacity: .7; } .comp.active { border-color: var(--teal); background: rgba(69,216,200,.07); }
.comp.evo1 { border-color: rgba(230,191,90,.5); } .comp.evo2 { border-color: var(--gold); box-shadow: inset 0 0 18px rgba(230,191,90,.12); }
.comp-head { display: flex; align-items: center; gap: 8px; } .comp-head b { font-size: 13px; } .comp-head small { margin-top: 0; }
.evo-badge { margin-left: auto; color: var(--gold); font-size: 11px; letter-spacing: 2px; }
.comp-bar { height: 6px; margin: 0; } .comp-bar .fill { background: linear-gradient(90deg, var(--bronze), var(--gold)); }
.comp-stats { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.comp-stats > div { display: flex; align-items: center; gap: 5px; } .comp-stats .ic { color: var(--bronze); width: 12px; height: 12px; }
.comp-stats span { color: var(--bone-dim); flex: 1; } .comp-stats b { color: var(--bone); } .comp-stats em { font-style: normal; color: var(--teal); font-size: 10px; }
.comp small .ic { width: 11px; height: 11px; } .comp small b { color: var(--gold); }
.comp .btn-group { display: flex; gap: 4px; } .comp .btn-group button { flex: 1; }

.toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 6px 0; cursor: pointer; }

/* =========================================================
   HUD v3 + mobil kompakt tasarım
   ========================================================= */
.plaque-map, .nav-btn { display: none; }
.map-title { position: absolute; left: 50%; top: calc(10px + var(--safe-top)); transform: translateX(-50%); text-align: center; pointer-events: none; white-space: nowrap; }
.map-title .map-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--bone); text-shadow: 0 1px 2px #000, 0 0 14px rgba(0,0,0,.8); }
.map-title .map-tier { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--teal); text-shadow: 0 1px 2px #000; }
.top-right { position: absolute; right: 10px; top: calc(10px + var(--safe-top)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.top-actions { position: static; }
.plaque-res { position: static; display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; min-width: 96px; }
.plaque-res.hidden { display: none; }
.res { justify-content: space-between; }
#gear-menu { top: calc(48px + var(--safe-top)); }
.plaque-hero { top: calc(10px + var(--safe-top)); left: 10px; min-width: 170px; padding: 6px 10px 6px 6px; }
.avatar { width: 36px; height: 36px; }
#buffs { top: calc(60px + var(--safe-top)); left: 10px; }
#save-dot { left: 3px; top: calc(52px + var(--safe-top)); }
#toasts { top: calc(40px + var(--safe-top)); }

/* Yetenek 2 sütun */
.skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.skill { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: 7px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.skill.max { border-color: var(--gold); }
.skill-head { display: flex; align-items: center; gap: 8px; } .skill-head > div { flex: 1; min-width: 0; } .skill-head b { font-size: 13px; } .skill-head small { margin-top: 0; color: var(--teal); }
.skill-head .lvl { font-size: 15px; color: var(--gold); margin: 0; } .skill-head .lvl i { font-style: normal; font-size: 10px; color: var(--bone-dim); }
.skill-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .skill-foot small { margin: 0; flex: 1; }
.skill .btn-group button { padding: 6px 10px; }

/* ---------- Mobil ---------- */
@media (max-width: 700px) {
  .plaque-hero { min-width: 0; padding: 4px 8px 4px 4px; } .avatar { width: 30px; height: 30px; } .hero-name { font-size: 11px; } .hero-name #hud-name { font-size: 12px; max-width: 80px; }
  .map-title { top: calc(54px + var(--safe-top)); } .map-title .map-name { font-size: 13px; }
  .top-actions button { width: 30px; height: 30px; } .plaque-res { min-width: 86px; padding: 4px 6px; } .res { font-size: 10px; }
  #buffs { top: calc(52px + var(--safe-top)); } #toasts { top: calc(84px + var(--safe-top)); }
  .bottom-nav { padding: 6px 6px calc(6px + var(--safe-bottom)); gap: 4px; } .bottom-nav button { padding: 6px 2px 4px; gap: 2px; } .bottom-nav .nav-ico { width: 18px; height: 18px; } .bottom-nav button span { font-size: 9px; }

  #panel { left: 0; right: 0; width: 100%; transform: none; bottom: calc(56px + var(--safe-bottom)); height: calc(100% - 56px - var(--safe-bottom) - var(--safe-top)); top: var(--safe-top); border-radius: 0; border-left: 0; border-right: 0; }
  #panel.visible { transform: none; }
  .panel-head { padding: 8px 12px; } .panel-title { font-size: 14px; }
  .panel-col { padding: 8px 10px 12px; font-size: 12px; } .panel-col h3 { margin: 10px 0 5px; }
  .panel-col button { padding: 6px 8px; font-size: 11px; } .panel-col button small { font-size: 9px; }
  .stat-strip { grid-template-columns: repeat(3, 1fr); gap: 3px; } .stat { padding: 4px 5px; gap: 4px; } .stat span { font-size: 9px; } .stat b { font-size: 11px; } .stat .ic-stat { width: 14px; height: 14px; }
  .doll { height: 270px; max-width: 250px; } .doll-svg { height: 260px; }
  .dslot { width: 62px; height: 46px; padding: 3px 4px; } .dslot span { font-size: 8px; } .dslot b { font-size: 9px; }
  .p-weapon, .p-shield { top: 58px; } .p-armor { top: 98px; } .p-bracelet, .p-ring { top: 116px; } .p-belt { top: 152px; } .p-boots { top: 222px; }
  .tabs button { padding: 5px 4px; font-size: 10px; }
  .detail { padding: 8px 10px; } .detail-name { font-size: 13px; } .detail-sub { font-size: 10px; } .detail-desc { font-size: 11px; }
  .btn-col button small { font-size: 9px; }
  .comp-grid { grid-template-columns: 1fr 1fr; gap: 6px; } .comp { padding: 8px; gap: 4px; } .comp-stats { font-size: 10px; } .comp small { font-size: 9px; }
  .skill-grid { grid-template-columns: 1fr 1fr; gap: 6px; } .skill { padding: 8px; gap: 4px; } .skill-head b { font-size: 12px; } .skill-head small { font-size: 9px; } .skill-foot { flex-direction: column; align-items: stretch; gap: 4px; } .skill .btn-group button { flex: 1; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 5px; } .ess { padding: 5px 6px; } .bonus { font-size: 9px; }
  .ess-slots.five { gap: 3px; } .ess-slots.five .ess-slot { padding: 5px 2px; } .ess-gem { width: 20px; height: 20px; }
  .lrow { padding: 8px; font-size: 11px; }
  .drops { padding: 5px 8px; } .drop { font-size: 10px; }
  .shop-grid { grid-template-columns: 1fr 1fr; gap: 5px; } .shop-item { padding: 6px; }
  .tmat { font-size: 10px; padding: 5px 8px; }
  .row { padding: 6px 0; } .row b { font-size: 12px; }
}

.lock { display: flex; align-items: center; gap: 6px; background: rgba(201,64,63,.12); border: 1px solid rgba(201,64,63,.4); border-radius: 5px; padding: 6px 8px; font-size: 11px; margin-top: 6px; }
.lock .ic { color: var(--blood); flex: none; } .lock b { color: var(--gold); }

/* =========================================================
   Mobil düzeltmeler v2 (üst öncelikli)
   ========================================================= */
.top-right .plaque-res { display: flex; flex-direction: column; grid-template-columns: none; gap: 4px; padding: 6px 8px; min-width: 100px; position: static; }
.top-right .plaque-res.hidden { display: none; }
.top-right .res { display: flex; justify-content: space-between; gap: 8px; }
.map-title { left: 0; right: 0; transform: none; width: 100%; text-align: center; }
@media (max-width: 700px) {
  .map-title { top: calc(62px + var(--safe-top)); }
  .plaque-hero { max-width: 46vw; }
  #panel .panel-cols { display: block; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  #panel .panel-col { display: block; overflow: visible; min-height: auto; height: auto; }
  #panel.single #panel-right { display: none; }
  #panel-right { padding-top: 10px; }
  .ess-slots.five { grid-template-columns: repeat(5, 1fr); } .ess-slots.five .ess-slot small { display: none; } .ess-slots.five .ess-slot b { font-size: 9px; }
  .stat-strip { grid-template-columns: repeat(3, 1fr); }
  .stat span { font-size: 9px; line-height: 1.1; } .stat b { font-size: 11px; }
}

/* Sıralama + HUD ince ayar */
.top-right .plaque-res { min-width: 84px; padding: 4px 7px; gap: 2px; } .top-right .res { font-size: 11px; } .top-right .res .ic { width: 13px; height: 13px; }
.map-title { top: calc(6px + var(--safe-top)); }
@media (max-width: 700px) { .map-title { top: calc(54px + var(--safe-top)); } .top-right .plaque-res { min-width: 76px; } .top-right .res { font-size: 10px; } }
.board-me { display: flex; align-items: center; gap: 8px; background: rgba(230,191,90,.08); border: 1px solid rgba(230,191,90,.35); border-radius: 6px; padding: 8px 12px; font-size: 12px; margin-bottom: 8px; }
.board-me .ic { color: var(--gold); } .board-me b { color: var(--gold); }
.board { display: flex; flex-direction: column; gap: 3px; }
.brow { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 8px; padding: 7px 10px; background: rgba(0,0,0,.3); border-radius: 5px; font-size: 12px; border: 1px solid transparent; }
.brow .rank { font-family: 'Cinzel', serif; font-weight: 700; color: var(--bone-dim); text-align: center; }
.brow .name { font-weight: 700; } .brow .sub { color: var(--bone-dim); font-size: 10px; } .brow b { display: flex; align-items: center; gap: 4px; color: var(--gold); min-width: 70px; justify-content: flex-end; }
.brow b .ic { color: var(--bronze); }
.brow.top1 .rank { color: #ffd45a; } .brow.top2 .rank { color: #d8d8e0; } .brow.top3 .rank { color: #d09050; }
.brow.me { border-color: var(--teal); background: rgba(69,216,200,.08); }
@media (max-width: 700px) { .brow { grid-template-columns: 26px 1fr auto; } .brow .sub { grid-column: 2; } }

/* =========================================================
   Açılır pencere + sabit yükseklikli yuvalar
   ========================================================= */
#modal { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; padding: 16px; }
#modal.hidden { display: none; }
.modal-card { position: relative; width: min(420px, 100%); max-height: calc(100% - 32px); overflow-y: auto; background: var(--plaque); border: 1px solid var(--plaque-border); border-radius: 8px; padding: 18px 16px 16px; box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 24px 60px rgba(0,0,0,.7); font-size: 13px; }
.modal-card::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
#modal-close { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 4px; background: rgba(0,0,0,.4); border: 1px solid var(--plaque-border); color: var(--bone-dim); cursor: pointer; font-size: 13px; }
.modal-card .detail { background: none; border: 0; padding: 0; margin: 0; }
.modal-card .detail-name { font-size: 16px; padding-right: 30px; }
.modal-card small { display: block; color: var(--bone-dim); font-size: 11px; margin-top: 2px; line-height: 1.4; }
.modal-card .bonus { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--teal); }
.modal-card .bonus .ic { width: 12px; height: 12px; color: var(--teal); }
.modal-card .detail-stat { display: flex; align-items: center; gap: 6px; font-weight: 700; margin: 8px 0 4px; color: var(--teal); }
.modal-card .detail-stat .next { color: var(--bone-dim); font-weight: 500; font-size: 11px; }
.modal-card .detail-sub { font-size: 11px; color: var(--bone-dim); }
.modal-card .detail-desc { font-size: 12px; color: var(--bone-dim); line-height: 1.4; margin-top: 4px; }
.modal-card .detail-mats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--bone-dim); margin-top: 8px; }
.modal-card .detail-mats .ic { color: var(--bronze); margin-right: 3px; } .modal-card .detail-mats b { color: var(--gold); }
.modal-card .btn-col { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.modal-card button { background: rgba(0,0,0,.4); border: 1px solid var(--plaque-border); color: var(--bone); border-radius: 5px; padding: 9px 12px; font: 700 13px 'Manrope', sans-serif; cursor: pointer; text-align: left; line-height: 1.2; }
.modal-card button small { font-size: 10px; margin-top: 2px; }
.modal-card button:disabled { opacity: .4; cursor: default; }
.modal-card button.primary { background: linear-gradient(180deg, #2b5f8a, #1a3a58); border-color: #4da3ff; }
.modal-card button.gold { background: linear-gradient(180deg, #7a5a1e, #4a3510); border-color: var(--gold); color: #ffe9a0; }
.modal-card button.danger { background: linear-gradient(180deg, #6a2a2a, #401616); border-color: var(--blood); }
.modal-card button.busy { opacity: .6; pointer-events: none; }
.modal-card .lock { display: flex; align-items: center; gap: 6px; background: rgba(201,64,63,.12); border: 1px solid rgba(201,64,63,.4); border-radius: 5px; padding: 6px 8px; font-size: 11px; margin-top: 8px; }
.modal-card .lock .ic { color: var(--blood); } .modal-card .lock b { color: var(--gold); }
.compare { margin-top: 8px; padding: 8px; background: rgba(0,0,0,.3); border-radius: 5px; border: 1px dashed rgba(255,255,255,.1); }
.compare small { margin: 0 0 3px; }

/* Yuvalar: eşit yükseklik, Çıkar tuşu altta sabit */
.ess-slots.five .ess-slot { display: flex; flex-direction: column; align-items: center; min-height: 190px; }
.ess-slots.five .ess-bon { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; }
.ess-slots.five .ess-slot button { margin-top: auto; width: 100%; }
@media (max-width: 700px) { .ess-slots.five .ess-slot { min-height: 120px; } .ess-slots.five .ess-bon { display: none; } }

/* Stat listesi kısaltma */
.stat-strip.collapsed .stat:nth-child(n+7) { display: none; }
button.link { background: none !important; border: 0 !important; color: var(--gold) !important; padding: 4px 0 !important; font-size: 11px !important; text-decoration: underline; cursor: pointer; }
.buff.event { border-color: var(--gold); } .buff.event .ic { color: var(--gold); }

/* Envanter ızgarası */
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.bslot { position: relative; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: 7px; padding: 10px 8px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; cursor: pointer; min-height: 96px; }
.bslot:hover { border-color: var(--plaque-border); background: rgba(0,0,0,.5); }
.bslot .ic-bag { width: 26px; height: 26px; color: var(--gold); margin-bottom: 2px; }
.bslot b { font-size: 11px; line-height: 1.2; } .bslot small { font-size: 9px; margin: 0; }
.bslot .cnt { position: absolute; right: 5px; top: 4px; background: rgba(0,0,0,.6); border: 1px solid rgba(184,137,58,.4); border-radius: 4px; padding: 1px 5px; font-size: 10px; font-weight: 700; color: var(--bone); }
.bslot.chest { border-color: rgba(230,191,90,.35); } .bslot.chest .ic-bag { color: #d9a24a; }
.bslot.rare { border-color: rgba(185,107,255,.4); } .bslot.rare .ic-bag { color: #b96bff; }
.modal-card h3 { font-family: 'Cinzel', serif; font-size: 11px; color: var(--bronze); letter-spacing: .08em; margin: 12px 0 6px; }
.modal-card .btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .modal-card .btn-row button { flex: 1; text-align: center; }
.modal-card .result { margin-top: 10px; padding: 8px 10px; background: rgba(230,191,90,.06); border: 1px solid rgba(230,191,90,.3); border-radius: 6px; }
.modal-card .result-title { font-family: 'Cinzel', serif; color: var(--gold); font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.modal-card .result-line { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11px; color: var(--teal); } .modal-card .result-line .hl { color: var(--gold); }
.modal-card .drops { background: rgba(0,0,0,.3); border-radius: 5px; padding: 6px 10px; } .modal-card .drop { display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
.modal-card .drop:last-child { border-bottom: 0; } .modal-card .drop span { display: flex; align-items: center; gap: 6px; } .modal-card .drop span small { display: inline; margin-left: 4px; } .modal-card .drop b { color: var(--gold); } .modal-card .drop .ic { color: var(--bronze); }
.modal-card .note { color: var(--bone-dim); font-size: 11px; line-height: 1.5; margin: 6px 0; }
@media (max-width: 700px) { .bag-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; } .bslot { min-height: 84px; padding: 8px 4px 6px; } .bslot b { font-size: 10px; } }

/* Pazar */
.mlist { display: flex; flex-direction: column; gap: 4px; }
.mrow { display: flex; justify-content: space-between; gap: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; padding: 8px 10px; }
.mrow-main { display: flex; align-items: center; gap: 10px; min-width: 0; } .mrow-main b { font-size: 12px; } .mrow-main em { font-style: normal; font-size: 10px; }
.mrow-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; } .mrow-side b { display: flex; align-items: center; gap: 4px; color: var(--gold); } .mrow-side b .ic { color: var(--bronze); }
.mrow-side small { margin: 0; } .mrow-side button { margin-top: 3px; padding: 5px 10px; font-size: 11px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--bone-dim); }
.form input { background: rgba(0,0,0,.45); border: 1px solid var(--plaque-border); border-radius: 5px; color: var(--bone); padding: 8px 10px; font: 700 13px 'Manrope', sans-serif; -webkit-user-select: text; user-select: text; }
.form input:disabled { opacity: .5; }
@media (max-width: 700px) { .mrow { flex-direction: column; } .mrow-side { flex-direction: row; align-items: center; justify-content: space-between; } .form { grid-template-columns: 1fr; } }

/* Craft taş dönüşümü: 2x2 buton */
.conv-row { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; padding: 10px; margin-bottom: 8px; }
.conv-head { margin-bottom: 8px; } .conv-head b { font-size: 13px; display: block; } .conv-head .arrow { color: var(--gold); margin: 0 4px; }
.conv-head small { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .conv-head small .ic { color: var(--bronze); }
.conv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.conv-grid button { text-align: center; padding: 8px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-grid button small { font-size: 10px; }
.panel-col .row { flex-wrap: nowrap; } .panel-col .row > div:first-child { min-width: 0; } .panel-col .row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
@media (max-width: 700px) { .conv-grid button { padding: 8px 4px; font-size: 11px; } }

/* Silüet: sadece sembol */
.dslot.icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; padding: 0; }
.dslot.icon .ic-slot { width: 30px; height: 30px; color: var(--rc, var(--bone)); }
.dslot.icon em { position: absolute; right: 4px; bottom: 3px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--rc); }
.dslot.icon i { position: absolute; left: 4px; top: 3px; font-style: normal; font-size: 9px; color: var(--teal); }
.p-helmet, .p-armor, .p-belt, .p-boots { margin-left: -29px; transform: none; }
/* Öz yuvaları: dokunulabilir, sabit yükseklik */
.ess-slots.five .ess-slot { cursor: pointer; min-height: 150px; }
.ess-slots.five .ess-slot:active { border-color: var(--gold); }
.merge-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.merge-row { display: grid; grid-template-columns: 1fr 64px 84px; gap: 6px; align-items: center; background: rgba(0,0,0,.3); border-radius: 6px; padding: 6px 8px; }
.merge-row button { text-align: center; padding: 8px 4px; white-space: nowrap; }
.merge-info b { font-size: 13px; } .merge-info small { white-space: nowrap; }
.modal-card .tabs { margin-top: 8px; } .modal-card .tabs button { flex: 1; padding: 6px; text-align: center; }
.modal-card .mats { margin: 6px 0; }
@media (max-width: 700px) {
  .ess-slots.five .ess-slot { min-height: 96px; padding: 6px 2px; } .ess-slots.five .ess-bon { display: none; }
  .dslot.icon { width: 50px; height: 50px; } .dslot.icon .ic-slot { width: 26px; height: 26px; }
  .p-helmet, .p-armor, .p-belt, .p-boots { margin-left: -25px; }
  .btn-row button { flex: 1 1 45%; text-align: center; }
}

/* Bildirimler + geliştirme animasyonu + şans etiketi */
#btn-bell { position: relative; } #btn-bell .badge { display: none; top: -5px; right: -5px; }
.nrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(0,0,0,.3); border: 1px solid transparent; border-radius: 6px; }
.nrow.unread { border-color: rgba(230,191,90,.45); background: rgba(230,191,90,.06); }
.nrow .btn-group { flex: none; } .tagc { font-size: 10px; color: var(--bone-dim); padding: 4px 8px; }
.chance { font-size: 11px; padding: 1px 6px; border-radius: 3px; margin-left: 6px; background: rgba(0,0,0,.35); }
.chance.ok { color: #7fe0a0; } .chance.mid { color: #ffd45a; } .chance.bad { color: #ff8a80; }
@keyframes flashOk { 0% { box-shadow: 0 0 0 0 rgba(127,224,160,0); } 30% { box-shadow: 0 0 0 6px rgba(127,224,160,.55), 0 0 40px rgba(127,224,160,.5); } 100% { box-shadow: 0 0 0 0 rgba(127,224,160,0); } }
@keyframes flashFail { 0% { transform: translateX(0); box-shadow: 0 0 0 0 rgba(201,64,63,0); } 20% { transform: translateX(-6px); box-shadow: 0 0 0 6px rgba(201,64,63,.55); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } 100% { transform: translateX(0); box-shadow: 0 0 0 0 rgba(201,64,63,0); } }
.modal-card.flash-ok { animation: flashOk .7s ease-out; } .modal-card.flash-fail { animation: flashFail .5s ease-out; }
.btn-row.bulk { margin: 0 0 8px; } .btn-row.bulk button { flex: 1; text-align: center; }

/* Öz yıldızları ve zar göstergesi */
.stars { font-size: 11px; letter-spacing: 1px; margin-left: auto; } .stars.s3 { color: #ffd45a; } .stars.s2 { color: #c8c8d0; } .stars.s1 { color: #8a8a94; }
.ess-head .stars { margin-left: auto; } .ess-head i { display: none; }
.bonus .roll { margin-left: auto; font-style: normal; font-size: 9px; letter-spacing: 1px; } .roll.r3 { color: #ffd45a; } .roll.r2 { color: #c8c8d0; } .roll.r1 { color: #6a6a74; }
.detail-name .stars { margin-left: 6px; font-size: 13px; }

.filterbar { display: flex; gap: 6px; margin-bottom: 8px; } .filterbar button { flex: 1; text-align: left; } .filterbar button.danger { flex: 0 0 auto; }
.modal-card .btn-row button { flex: 1 1 30%; }

/* Yuvalar: kompakt, taşmaz */
.panel-col { overflow-x: hidden; }
.ess-slots.five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.ess-slots.five .ess-slot { min-height: 0; padding: 8px 2px; gap: 3px; min-width: 0; overflow: hidden; }
.ess-slots.five .ess-slot b { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ess-slots.five .ess-slot small { font-size: 9px; margin: 0; white-space: nowrap; } .ess-slots.five .ess-slot .stars { margin: 0; font-size: 10px; } .ess-slots.five .bcount { color: var(--bone-dim); }
.ess-slots.five .ess-slot button, .ess-slots.five .ess-bon { display: none; }
.ess-slots.five .ess-gem { width: 24px; height: 24px; }
.btn-row.bulk button small { display: none; }
@media (max-width: 700px) { .ess-slots.five .ess-slot { padding: 6px 1px; } .ess-slots.five .ess-gem { width: 18px; height: 18px; } }

/* =========================================================
   Öz saflık görsel dili: kesim + çerçeve + efekt
   ========================================================= */
.gemwrap { position: relative; display: inline-flex; width: var(--gs); height: var(--gs); flex: none; align-items: center; justify-content: center; }
.gemwrap .gem { width: 100%; height: 100%; position: relative; z-index: 2; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.gemwrap.t1 .gem { filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.gemwrap.t3 .gem { animation: gPulse 2.6s ease-in-out infinite; }
.gemwrap.t4::before, .gemwrap.t5::before { content: ""; position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ec) 45%, transparent) 0%, transparent 65%); z-index: 1; animation: gHalo 3s ease-in-out infinite; }
.gemwrap.t4 .gem, .gemwrap.t5 .gem { animation: gPulse 2.4s ease-in-out infinite; }
.gemwrap.t5::after, .gemwrap.t6::after { content: ""; position: absolute; inset: -30%; border-radius: 50%; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 50% 2%, #fff 0 1.4px, transparent 2px), radial-gradient(circle at 93% 72%, #fff 0 1.2px, transparent 1.8px), radial-gradient(circle at 7% 72%, #fff 0 1.2px, transparent 1.8px);
  animation: gOrbit 4s linear infinite; }
.gemwrap.t6::before { content: ""; position: absolute; inset: -60%; z-index: 1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ec) 55%, #fff) 0deg 5deg, transparent 5deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%); mask: radial-gradient(circle, #000 20%, transparent 62%); animation: gOrbit 9s linear infinite; opacity: .8; }
.gemwrap.t6 .gem { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ec) 80%, #fff)) drop-shadow(0 0 2px #fff); animation: gPulse 1.8s ease-in-out infinite; }
.gemwrap.t6::after { inset: -40%; animation-duration: 2.6s; background: radial-gradient(circle at 50% 2%, #fff 0 1.6px, transparent 2.2px), radial-gradient(circle at 93% 72%, #fff 0 1.4px, transparent 2px), radial-gradient(circle at 7% 72%, #fff 0 1.4px, transparent 2px), radial-gradient(circle at 78% 10%, #ffe9a0 0 1.2px, transparent 1.8px), radial-gradient(circle at 22% 10%, #ffe9a0 0 1.2px, transparent 1.8px); }
@keyframes gPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); filter: brightness(1.2) drop-shadow(0 1px 1px rgba(0,0,0,.6)); } }
@keyframes gHalo { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes gOrbit { to { transform: rotate(360deg); } }

/* Kart çerçeveleri */
.ess { position: relative; }
.ess-head { gap: 8px; } .ess-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .ess-title b { font-size: 12px; } .ess-title em { font-style: normal; font-size: 10px; }
.ess.t1 { border-color: rgba(154,154,164,.25); background: rgba(0,0,0,.28); }
.ess.t2 { border-color: rgba(200,208,220,.35); }
.ess.t3 { border-color: rgba(210,220,235,.5); background-image: linear-gradient(#cfd6e6, #cfd6e6), linear-gradient(#cfd6e6, #cfd6e6), linear-gradient(#cfd6e6, #cfd6e6), linear-gradient(#cfd6e6, #cfd6e6); background-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px; background-position: right 3px top 3px, right 3px top 3px, left 3px bottom 3px, left 3px bottom 3px; background-repeat: no-repeat; background-color: rgba(0,0,0,.35); }
.ess.t4 { border-color: rgba(230,191,90,.55); box-shadow: inset 0 0 12px color-mix(in srgb, var(--ec) 15%, transparent); }
.ess.t5 { border: 1px solid #e6bf5a; outline: 1px solid rgba(230,191,90,.35); outline-offset: 2px; box-shadow: inset 0 0 16px color-mix(in srgb, var(--ec) 22%, transparent), 0 0 10px rgba(230,191,90,.2); }
.ess.t5::after, .ess.t6::after { content: "♛"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #e6bf5a; text-shadow: 0 0 6px rgba(230,191,90,.8); }
.ess.t6 { border: 2px solid transparent; background: linear-gradient(#141a2c, #141a2c) padding-box, linear-gradient(90deg, #e6bf5a, #fff, var(--ec), #fff, #e6bf5a) border-box; background-size: 100% 100%, 300% 100%; animation: gBorder 4s linear infinite; box-shadow: 0 0 16px color-mix(in srgb, var(--ec) 40%, transparent), inset 0 0 20px color-mix(in srgb, var(--ec) 25%, transparent); }
.ess.t6::after { color: #fff; text-shadow: 0 0 8px #fff, 0 0 14px var(--ec); }
@keyframes gBorder { to { background-position: 0 0, 300% 0; } }

/* Yuvalar ve büyük önizleme */
.ess-slots.five .ess-slot.t4 { box-shadow: inset 0 0 12px color-mix(in srgb, var(--ec) 20%, transparent); }
.ess-slots.five .ess-slot.t5 { border-color: #e6bf5a; }
.ess-slots.five .ess-slot.t6 { border: 1px solid transparent; background: linear-gradient(#141a2c, #141a2c) padding-box, linear-gradient(90deg, #e6bf5a, #fff, var(--ec), #e6bf5a) border-box; background-size: 100% 100%, 300% 100%; animation: gBorder 4s linear infinite; }
.ess-hero { display: flex; justify-content: center; padding: 14px 0 6px; }
.mrow.t5, .mrow.t6 { border-color: rgba(230,191,90,.5); }
.merge-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .merge-info small { width: 100%; }
.detail-stat .gemwrap { margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .gemwrap .gem, .gemwrap::before, .gemwrap::after, .ess.t6, .ess-slot.t6 { animation: none !important; } }

/* Mini yıldızlar */
.mstars { display: inline-flex; gap: 1px; align-items: center; flex: none; vertical-align: middle; }
.mstars svg { width: 10px; height: 10px; }
.mstars svg.on { fill: #ffc83d; stroke: #a8780e; stroke-width: .5; filter: drop-shadow(0 0 1.5px rgba(255,200,61,.5)); }
.mstars svg.off { fill: none; stroke: #6a6a74; stroke-width: .8; }
.mstars.roll { margin-left: auto; } .mstars.roll svg { width: 8px; height: 8px; }
.mstars.inline svg { width: 9px; height: 9px; }
.ess-head .mstars { margin-left: auto; }
.ess-title b, .ess-title em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ess-head { flex-wrap: nowrap; }
.bonus { gap: 5px; } .bonus .mstars.roll { padding-left: 4px; }
.stars { display: none; }

#pause-banner { position: absolute; left: 50%; top: calc(36px + var(--safe-top)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: var(--plaque); border: 1px solid var(--blood); border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--bone); box-shadow: 0 6px 18px rgba(0,0,0,.5); white-space: nowrap; }
#pause-banner.hidden { display: none; } #pause-banner .ic { color: var(--blood); }
#pause-banner button { background: linear-gradient(180deg, #2b5f8a, #1a3a58); border: 1px solid #4da3ff; color: #fff; border-radius: 4px; padding: 4px 10px; font: 700 11px 'Manrope', sans-serif; cursor: pointer; }
@media (max-width: 700px) { #pause-banner { top: calc(84px + var(--safe-top)); font-size: 11px; max-width: 94vw; white-space: normal; text-align: center; } }

/* =========================================================
   HUD v4: bufflar dikey liste, kaynak plakası yok
   ========================================================= */
#buffs { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.buff { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 5px; border-radius: 5px; cursor: pointer; }
.buff .bname { font-size: 11px; font-weight: 700; color: var(--bone); white-space: nowrap; }
.buff .btime { font-size: 10px; color: var(--gold); margin-left: 2px; }
.buff span:empty { display: none; }
@media (max-width: 700px) { .buff .bname { font-size: 10px; } .buff { padding: 3px 6px 3px 4px; } .map-title { top: calc(64px + var(--safe-top)); left: 50%; right: auto; transform: translateX(-50%); width: auto; max-width: 60vw; } }

/* Yetenekler: kompakt satırlar */
.skill-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.skrow { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; padding: 8px 10px; }
.skrow.max { border-color: rgba(230,191,90,.4); }
.skrow .ic-stat { color: var(--gold); flex: none; }
.sk-main { flex: 1; min-width: 0; } .sk-main b { font-size: 12px; display: flex; gap: 6px; align-items: baseline; } .sk-main b em { font-style: normal; font-size: 10px; color: var(--bone-dim); }
.sk-main small { display: block; font-size: 10px; color: var(--teal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sk-main small i { font-style: normal; color: var(--bone-dim); }
.sk-main .bar { margin-top: 4px; height: 3px; }
.sk-btns { display: flex; gap: 4px; flex: none; } .sk-btns button { padding: 5px 8px; font-size: 11px; min-width: 44px; text-align: center; line-height: 1.1; } .sk-btns button small { font-size: 9px; }
@media (max-width: 700px) { .skill-list { grid-template-columns: 1fr; } }

/* Envanter v2: sekmeler + satır listesi */
.bag-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 10px; }
.bag-tabs button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; color: var(--bone-dim); font: 700 10px 'Manrope', sans-serif; cursor: pointer; position: relative; }
.bag-tabs button .ic { width: 18px; height: 18px; } .bag-tabs button.on { border-color: var(--gold); color: var(--gold); background: rgba(230,191,90,.08); }
.bag-tabs button em { position: absolute; top: 3px; right: 4px; font-style: normal; font-size: 9px; background: rgba(0,0,0,.6); border-radius: 3px; padding: 0 4px; color: var(--bone); }
.bag-list { display: flex; flex-direction: column; gap: 4px; }
.bag-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; cursor: pointer; }
.bag-row:hover { border-color: var(--plaque-border); }
.bag-ico { width: 34px; height: 34px; border-radius: 6px; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; flex: none; } .bag-ico .ic { width: 20px; height: 20px; color: var(--gold); }
.bag-row.rare .bag-ico .ic { color: #b96bff; }
.bag-main { flex: 1; min-width: 0; } .bag-main b { font-size: 12px; display: block; } .bag-main small { font-size: 10px; color: var(--bone-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.bag-cnt { font-weight: 700; color: var(--gold); font-size: 13px; flex: none; }
.bag-row .chev { width: 14px; height: 14px; color: var(--bone-dim); flex: none; }
.chest-list { display: flex; flex-direction: column; gap: 6px; }
.chest-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(230,191,90,.05); border: 1px solid rgba(230,191,90,.3); border-radius: 7px; flex-wrap: wrap; }
.chest-ico { width: 40px; height: 40px; border-radius: 7px; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; flex: none; } .chest-ico .ic { width: 24px; height: 24px; color: #d9a24a; }
.chest-main { flex: 1; min-width: 120px; } .chest-main b { font-size: 13px; display: block; } .chest-main small { color: var(--bone-dim); }
.chest-btns { display: flex; gap: 4px; flex: none; } .chest-btns button { padding: 7px 10px; font-size: 11px; } .chest-btns button.info { padding: 7px 8px; }
@media (max-width: 700px) { .bag-tabs { grid-template-columns: repeat(3, 1fr); } .chest-btns { width: 100%; } .chest-btns button { flex: 1; text-align: center; } }

/* Boss v2: bölge kartları */
.region-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } .region-head b { font-family: 'Cinzel', serif; font-size: 15px; color: var(--gold); } .region-head small { color: var(--bone-dim); }
.lrow em.ready { font-style: normal; color: var(--teal); font-weight: 700; }
.boss-cards { display: flex; flex-direction: column; gap: 8px; }
.boss-card { border: 1px solid rgba(255,255,255,.08); border-left: 3px solid var(--bc); border-radius: 7px; padding: 10px 12px; background: rgba(0,0,0,.3); }
.boss-card.ready { border-color: rgba(69,216,200,.4); border-left-color: var(--bc); background: rgba(69,216,200,.05); } .boss-card.dead { opacity: .6; }
.bc-head { display: flex; align-items: center; gap: 8px; } .bc-title { flex: 1; min-width: 0; } .bc-title b { font-size: 14px; color: var(--bc); display: block; } .bc-title small { color: var(--bone-dim); }
.bc-state .ok { color: var(--teal); font-weight: 700; } .bc-state .cd { color: var(--bone-dim); display: flex; align-items: center; gap: 4px; font-weight: 700; } .bc-state .dead { color: var(--blood); font-weight: 700; }
.bc-req { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 11px; } .bc-req span { display: flex; align-items: center; gap: 4px; color: var(--bone-dim); } .bc-req span.ok { color: var(--teal); } .bc-req span.bad { color: #ff8a80; } .bc-req .ic { width: 12px; height: 12px; }
.bc-mech { font-size: 11px; color: var(--bone-dim); margin-top: 6px; }
.bc-drops { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .bc-drops span { display: flex; align-items: center; gap: 3px; font-size: 10px; background: rgba(0,0,0,.35); border-radius: 4px; padding: 3px 6px; color: var(--bone-dim); } .bc-drops .ic { width: 12px; height: 12px; color: var(--bronze); }
.bc-btns { display: flex; gap: 6px; margin-top: 10px; } .bc-btns button { flex: 1; text-align: center; } .bc-btns button.gold { flex: 0 0 auto; }
.chk:disabled { opacity: .3; }

/* Bölge adı: alt ortada, butonların üstünde, iki satır */
.map-title { top: auto !important; bottom: calc(84px + var(--safe-bottom)); left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: auto !important; display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 70vw; background: rgba(0,0,0,.35); border: 1px solid rgba(184,137,58,.35); border-radius: 6px; padding: 4px 12px; }
.map-title .map-name { font-size: 13px; } .map-title .map-tier { margin-left: 0; font-size: 10px; }
@media (max-width: 700px) { .map-title { bottom: calc(80px + var(--safe-bottom)); } }
/* GearScore plakada */
.hero-gs { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--bone-dim); margin-top: 3px; } .hero-gs .ic { width: 11px; height: 11px; color: var(--gold); } .hero-gs b { color: var(--gold); }
/* Yetenek satırı mobilde taşmasın */
.skrow { min-width: 0; } .skill-list { min-width: 0; }
@media (max-width: 700px) { .skrow { padding: 7px 8px; gap: 6px; } .sk-btns button { min-width: 38px; padding: 5px 5px; font-size: 10px; } .sk-main small { white-space: normal; } }

/* Boss kartları v3: kompakt tek blok */
.boss-cards { gap: 5px; }
.boss-card { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 8px; }
.boss-card > .chk { flex: none; }
.bc-body { flex: 1; min-width: 0; }
.bc-line1 { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .bc-line1 b { display: flex; align-items: center; gap: 5px; color: var(--bc); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bc-line1 b .ic { width: 14px; height: 14px; flex: none; }
.bc-state em { font-style: normal; font-weight: 700; font-size: 11px; display: flex; align-items: center; gap: 3px; } .bc-state .ok { color: var(--teal); } .bc-state .cd { color: var(--bone-dim); } .bc-state .dead { color: var(--blood); } .bc-state .ic { width: 11px; height: 11px; }
.bc-line2 { display: flex; flex-wrap: wrap; gap: 3px 9px; margin-top: 3px; font-size: 11px; } .bc-line2 span { display: flex; align-items: center; gap: 3px; color: var(--bone-dim); font-weight: 700; } .bc-line2 span.ok { color: var(--teal); } .bc-line2 span.bad { color: #ff8a80; } .bc-line2 .ic { width: 11px; height: 11px; }
.bc-act { display: flex; gap: 4px; flex: none; } .bc-act button { padding: 6px 9px; font-size: 11px; min-width: 0; } .bc-act button.info, .bc-act button.gold { padding: 6px 7px; } .bc-act button.primary { min-width: 58px; text-align: center; }
.bc-head, .bc-req, .bc-mech, .bc-drops, .bc-btns { display: none; }
.modal-card .stat-strip.two { grid-template-columns: 1fr 1fr; gap: 4px; margin: 8px 0; }
@media (max-width: 700px) { .bc-line2 { gap: 2px 7px; font-size: 10px; } .bc-act button.primary { min-width: 48px; } }

/* Sol üst: plaka + bufflar akışta (üst üste binmez) */
.top-left { position: absolute; left: 12px; top: calc(12px + var(--safe-top)); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; z-index: 5; }
.top-left .plaque-hero { position: static; }
#buffs { position: static !important; top: auto !important; left: auto !important; margin-top: 0; }
@media (max-width: 700px) { .top-left { left: 8px; top: calc(8px + var(--safe-top)); } }

/* Cüzdan: alt sol, butonların üstünde */
#wallet { position: absolute; left: 12px; bottom: calc(84px + var(--safe-bottom)); display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.4); border: 1px solid rgba(184,137,58,.35); border-radius: 6px; padding: 5px 6px 5px 10px; font-size: 12px; z-index: 5; }
#wallet.hidden { display: none; }
.w-item { display: flex; align-items: center; gap: 4px; } .w-item .ic { width: 13px; height: 13px; color: var(--gold); } .w-item .ic.dia { color: #7ad8ff; } .w-item b { color: var(--bone); }
#w-plus { width: 22px; height: 22px; border-radius: 5px; border: 1px solid #7ad8ff; background: linear-gradient(180deg, #2b5f8a, #1a3a58); color: #fff; font: 700 15px/1 'Manrope', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; }
@media (max-width: 700px) { #wallet { left: 8px; bottom: calc(80px + var(--safe-bottom)); font-size: 11px; gap: 7px; padding: 4px 5px 4px 8px; } .map-title { left: auto !important; right: 8px !important; transform: none !important; max-width: 46vw; } }

#modal-close { display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; }
.modal-card button small .have { color: var(--bone-dim); } .modal-card button small .lack { color: #ff8a80; font-weight: 700; }
.modal-card button small .lack .ic { color: #ff8a80; }
.confirm-lines { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--bone); } .confirm-lines .gold { color: var(--gold); }
.confirm-lines div:last-child { color: var(--bone-dim); font-size: 11px; }

/* Başarımlar */
.ach-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ach { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; padding: 8px 10px; }
.ach.can { border-color: var(--gold); background: rgba(230,191,90,.07); } .ach.done { opacity: .55; }
.ach .ic-stat { color: var(--gold); flex: none; } .ach-main { flex: 1; min-width: 0; } .ach-main b { font-size: 12px; display: block; } .ach-main small { font-size: 10px; color: var(--bone-dim); display: block; } .ach-main .bar { margin: 3px 0 2px; height: 3px; }
.ach button { flex: none; padding: 6px 9px; font-size: 11px; display: flex; align-items: center; gap: 4px; } .ach button .ic { color: #7ad8ff; width: 12px; height: 12px; }
.ach-done .ic { color: var(--teal); width: 18px; height: 18px; }
#btn-ach { position: relative; } #btn-ach .badge { position: static; display: none; margin-left: 6px; }
@media (max-width: 700px) { .ach-list { grid-template-columns: 1fr; } }
/* Rehber */
#tutorial { position: absolute; left: 0; right: 0; bottom: calc(96px + var(--safe-bottom)); display: flex; justify-content: center; z-index: 25; padding: 0 12px; pointer-events: none; }
#tutorial.hidden { display: none; }
.tut-card { pointer-events: auto; width: min(460px, 100%); background: var(--plaque); border: 1px solid var(--gold); border-radius: 8px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.tut-step { font-family: 'Cinzel', serif; font-size: 11px; color: var(--gold); letter-spacing: .08em; margin-bottom: 4px; }
.tut-text { font-size: 13px; line-height: 1.5; color: var(--bone); }
.tut-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.tut-btns button { padding: 7px 14px; border-radius: 5px; border: 1px solid var(--plaque-border); background: rgba(0,0,0,.4); color: var(--bone); font: 700 12px 'Manrope', sans-serif; cursor: pointer; }
.tut-btns button.primary { background: linear-gradient(180deg, #2b5f8a, #1a3a58); border-color: #4da3ff; color: #fff; }
.bottom-nav button.tut-hl { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(230,191,90,.35), 0 0 16px rgba(230,191,90,.5); animation: tutPulse 1.2s ease-in-out infinite; }
@keyframes tutPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (max-width: 700px) { #tutorial { bottom: calc(118px + var(--safe-bottom)); } .tut-text { font-size: 12px; } }

.dslot.icon .rank { position: absolute; left: 4px; top: 3px; text-decoration: none; font-size: 9px; font-weight: 700; color: var(--gold); background: rgba(0,0,0,.55); border-radius: 3px; padding: 0 3px; }
.dslot.icon i { left: auto; right: 4px; top: 3px; }
.toggle.auto-up { margin: 8px 0 2px; font-size: 12px; } .toggle.auto-up em { font-style: normal; color: var(--teal); }
.up-row { margin-top: 8px; } .up-row button { flex: 1; text-align: left; }
.ach button small { display: block; font-size: 9px; color: var(--bone-dim); }

/* Kayıt / Sohbet kutusu: sabit boyut, taşan satırlar yukarı kayar */
#log { position: absolute; right: 12px; bottom: calc(84px + var(--safe-bottom)); width: 300px; height: 190px; background: rgba(8,11,22,.85); border: 1px solid rgba(184,137,58,.35); border-radius: 7px; z-index: 6; display: flex; flex-direction: column; font-size: 11px; overflow: hidden; backdrop-filter: blur(4px); }
#log.collapsed { height: auto; } #log.collapsed #log-body, #log.collapsed #log-input { display: none; } #log.collapsed #log-toggle { transform: rotate(180deg); }
.log-head { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.06); flex: none; }
.log-tab { flex: 1; background: none; border: 0; color: var(--bone-dim); padding: 6px 4px; font: 700 11px 'Manrope', sans-serif; cursor: pointer; position: relative; }
.log-tab.on { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.log-tab em { display: none; position: absolute; top: 2px; right: 6px; font-style: normal; font-size: 9px; background: var(--blood); color: #fff; border-radius: 8px; padding: 0 5px; }
#log-toggle { background: none; border: 0; color: var(--bone-dim); padding: 6px 8px; cursor: pointer; font-size: 12px; flex: none; }
#log-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px; display: flex; flex-direction: column; gap: 2px; justify-content: flex-end; }
.lg { display: flex; align-items: center; gap: 5px; line-height: 1.3; color: var(--bone); flex: none; } .lg .ic { width: 11px; height: 11px; color: var(--bronze); flex: none; }
.lg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg.gold span { color: var(--gold); } .lg.loot span { color: var(--teal); } .lg.dim { color: var(--bone-dim); }
.lg.msg { display: block; white-space: normal; } .lg.msg b { color: var(--gold); cursor: pointer; margin-right: 4px; } .lg.msg.me b { color: var(--teal); } .lg.msg.pm b { color: #b96bff; } .lg.msg span { white-space: normal; word-break: break-word; }
#log-input { display: flex; gap: 4px; padding: 4px 6px 6px; border-top: 1px solid rgba(255,255,255,.06); flex: none; } #log-input.hidden { display: none; }
#log-input input { flex: 1; min-width: 0; background: rgba(0,0,0,.45); border: 1px solid var(--plaque-border); border-radius: 4px; color: var(--bone); padding: 5px 8px; font: 12px 'Manrope', sans-serif; -webkit-user-select: text; user-select: text; }
#chat-to { flex: 0 0 74px !important; } #chat-to.hidden { display: none; }
#chat-send { background: linear-gradient(180deg, #2b5f8a, #1a3a58); border: 1px solid #4da3ff; color: #fff; border-radius: 4px; padding: 5px 9px; font: 700 11px 'Manrope', sans-serif; cursor: pointer; flex: none; }
.pmbtn { background: none; border: 0; padding: 0 2px; cursor: pointer; vertical-align: middle; } .pmbtn .ic { width: 12px; height: 12px; color: var(--teal); }
@media (max-width: 700px) { #log { left: 8px; right: 8px; width: auto; height: 150px; bottom: calc(112px + var(--safe-bottom)); } #log.collapsed { height: auto; } .map-title { bottom: calc(80px + var(--safe-bottom)); } #wallet { bottom: calc(80px + var(--safe-bottom)); } }

/* Kayıt / Sohbet: sağdan kayan panel + kenar tuşu */
#log { right: 0; bottom: calc(150px + var(--safe-bottom)); width: 320px; height: 210px; border-radius: 8px 0 0 8px; border-right: 0; transition: transform .25s ease; transform: translateX(0); }
#log.closed { transform: translateX(105%); pointer-events: none; }
#log.collapsed { height: 210px; } #log.collapsed #log-body, #log.collapsed #log-input { display: flex; } #log-toggle { transform: none; }
#log-fab { position: absolute; right: 0; bottom: calc(150px + var(--safe-bottom)); width: 42px; height: 44px; border-radius: 8px 0 0 8px; background: var(--plaque); border: 1px solid var(--plaque-border); border-right: 0; color: var(--gold); cursor: pointer; z-index: 6; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
#log-fab .ic { width: 20px; height: 20px; }
#log-fab em { display: none; position: absolute; top: -6px; left: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--blood); color: #fff; font: 700 10px/18px 'Manrope', sans-serif; font-style: normal; align-items: center; justify-content: center; }
#log:not(.closed) ~ #log-fab, #log-fab.hide { display: none; }
@media (max-width: 700px) { #log { left: auto; width: 92vw; height: 200px; bottom: calc(150px + var(--safe-bottom)); } #log-fab { bottom: calc(150px + var(--safe-bottom)); } .map-title { bottom: calc(80px + var(--safe-bottom)); } #wallet { bottom: calc(80px + var(--safe-bottom)); } }

.side-fab { position: absolute; right: 0; bottom: calc(202px + var(--safe-bottom)); width: 42px; height: 44px; border-radius: 8px 0 0 8px; background: var(--plaque); border: 1px solid var(--plaque-border); border-right: 0; color: var(--gold); cursor: pointer; z-index: 6; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.side-fab .ic { width: 20px; height: 20px; }
.talisman { margin-top: 8px; background: rgba(0,0,0,.3); border: 1px solid rgba(230,191,90,.35); border-radius: 7px; padding: 10px 12px; }
.talisman.locked { opacity: .6; border-color: rgba(255,255,255,.08); }
.tl-head { display: flex; align-items: center; gap: 10px; } .tl-head .ic-big { color: var(--gold); width: 30px; height: 30px; } .tl-head b { font-size: 13px; display: block; } .tl-head b em { font-style: normal; font-size: 11px; color: var(--bone-dim); margin-left: 6px; } .tl-head small { color: var(--bone-dim); font-size: 11px; }
.talisman .bar { margin: 8px 0 4px; height: 4px; }
.panel button small .have { color: var(--bone-dim); } .panel button small .lack { color: #ff8a80; font-weight: 700; }
.merge-info b i { font-style: normal; font-size: 10px; color: var(--bone-dim); font-weight: 500; }
.merge-row.top { grid-template-columns: 1fr; border: 1px solid rgba(255,244,208,.35); }

/* Sol üst plaka v2 (SRO tarzı): isim + Lv, HP barı sayıyla, GS barı */
.plaque-hero { min-width: 210px; padding: 6px 12px 6px 6px; }
.hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hero-name { display: flex; justify-content: space-between; align-items: baseline; }
.plaque-hero .bar { height: 11px; border-radius: 3px; }
.plaque-hero .bar.hp .fill { background: linear-gradient(180deg, #ff6a5a, #b8261e); }
.plaque-hero .bar.gsbar .fill { background: linear-gradient(180deg, #e6bf5a, #8a6a1e); }
.plaque-hero .bar-text { font-size: 9px; line-height: 11px; color: #fff; text-shadow: 0 1px 2px #000; display: flex; align-items: center; justify-content: center; gap: 3px; } .plaque-hero .bar-text .ic { width: 9px; height: 9px; }
.hero-gs { display: none; }
#xpbar { position: absolute; left: 0; right: 0; bottom: calc(74px + var(--safe-bottom)); height: 8px; background: rgba(0,0,0,.6); border-top: 1px solid rgba(184,137,58,.35); border-bottom: 1px solid rgba(184,137,58,.35); z-index: 5; }
#xpbar .fill { height: 100%; background: linear-gradient(90deg, #3a8ad8, #7ad0ff); box-shadow: 0 0 8px rgba(122,208,255,.5); transition: width .3s; }
#xpbar span { position: absolute; right: 8px; top: -14px; font-size: 10px; color: var(--bone-dim); font-weight: 700; text-shadow: 0 1px 2px #000; }
@media (max-width: 700px) { .plaque-hero { min-width: 190px; } #xpbar { bottom: calc(72px + var(--safe-bottom)); height: 6px; } #xpbar span { font-size: 9px; top: -13px; } #wallet, .map-title { bottom: calc(92px + var(--safe-bottom)); } }

/* EXP barı en altta, butonların altında */
.bottom-nav { bottom: calc(12px + var(--safe-bottom)); padding-bottom: 6px; }
#xpbar { bottom: 0 !important; height: 10px; padding-bottom: var(--safe-bottom); background: rgba(0,0,0,.85); border-top: 1px solid rgba(184,137,58,.5); border-bottom: 0; z-index: 7; }
#xpbar .fill { height: 10px; }
#xpbar span { top: -15px; right: 10px; }
@media (max-width: 700px) { .bottom-nav { bottom: calc(10px + var(--safe-bottom)); } #xpbar { height: 8px; } #xpbar .fill { height: 8px; } #xpbar span { top: -14px; } }

/* EXP barı: yazı barın içinde, tema uyumlu */
#xpbar { height: 16px; display: flex; align-items: center; background: linear-gradient(180deg, #0b0f1c, #060811); border-top: 1px solid rgba(184,137,58,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
#xpbar .fill { position: absolute; left: 0; top: 0; bottom: var(--safe-bottom); height: auto; background: linear-gradient(180deg, #4aa0e8, #1d4f8a); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 10px rgba(74,160,232,.45); }
#xpbar span { position: relative; top: 0; right: auto; width: 100%; text-align: center; font: 700 10px 'Cinzel', serif; letter-spacing: .06em; color: #ffe9a0; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.8); pointer-events: none; }
.bottom-nav { bottom: calc(16px + var(--safe-bottom)); }
@media (max-width: 700px) { #xpbar { height: 14px; } #xpbar span { font-size: 9px; letter-spacing: .03em; } .bottom-nav { bottom: calc(14px + var(--safe-bottom)); } }

.dslot.icon.special { border-style: dashed; } .dslot.icon.special .ic-slot { color: var(--teal); } .dslot.icon.special.locked { opacity: .5; } .dslot.icon.special.locked .ic-slot { color: var(--bone-dim); }
.dslot.icon.special .rank { color: var(--teal); } .dslot.icon.special em { color: var(--teal); }
.p-earring { right: 0; top: 0; } .p-bracelet { left: 0; top: 140px; } .p-ring { right: 0; top: 140px; }

/* =========================================================
   Eşya penceresi v2 + efsun penceresi + kilit + sekmeler + çanta kutuları
   ========================================================= */
.it-head { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; background: linear-gradient(135deg, rgba(0,0,0,.45), rgba(0,0,0,.2)); border: 1px solid var(--pc, var(--plaque-border)); margin-right: 30px; }
.it-ico { width: 44px; height: 44px; border-radius: 8px; background: rgba(0,0,0,.5); border: 1px solid var(--pc); display: flex; align-items: center; justify-content: center; position: relative; flex: none; } .it-ico .ic { width: 26px; height: 26px; color: var(--pc); }
.it-ico em { position: absolute; left: -4px; top: -6px; font-style: normal; font-size: 9px; font-weight: 700; color: var(--gold); background: rgba(0,0,0,.7); border-radius: 3px; padding: 0 3px; }
.it-title { flex: 1; min-width: 0; } .it-title b { display: block; font-family: 'Cinzel', serif; font-size: 15px; color: var(--pc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .it-title small { color: var(--bone-dim); font-size: 11px; }
.lockbtn { background: rgba(0,0,0,.4); border: 1px solid var(--plaque-border); border-radius: 6px; width: 32px; height: 32px; font-size: 15px; cursor: pointer; padding: 0 !important; } .lockbtn.on { border-color: var(--gold); box-shadow: 0 0 8px rgba(230,191,90,.4); }
.it-section { margin-top: 10px; } .it-section h4 { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .08em; color: var(--bronze); margin: 0 0 6px; display: flex; justify-content: space-between; } .it-section h4 em { font-style: normal; color: var(--bone-dim); font-family: 'Manrope', sans-serif; letter-spacing: 0; }
.it-stats { display: flex; flex-direction: column; gap: 4px; }
.it-stat { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; background: rgba(230,191,90,.08); border: 1px solid rgba(230,191,90,.3); border-radius: 6px; padding: 7px 10px; }
.it-stat span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bone); } .it-stat span .ic { width: 14px; height: 14px; color: var(--gold); }
.it-stat b { font-size: 14px; color: var(--gold); } .it-stat i { font-style: normal; font-size: 10px; color: var(--bone-dim); }
.bn-list { display: flex; flex-direction: column; gap: 3px; }
.bn { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; padding: 6px 10px; }
.bn span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--teal); } .bn span .ic { width: 13px; height: 13px; color: var(--teal); } .bn b { color: var(--teal); font-size: 12px; } .bn .mstars.roll { margin: 0; }
.bn.empty { border-style: dashed; grid-template-columns: 1fr auto; } .bn.empty span { color: var(--bone-dim); } .bn.empty span .ic { color: var(--bone-dim); } .bn.empty i { font-style: normal; font-size: 10px; color: var(--bone-dim); }
.it-mats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--bone-dim); margin-bottom: 6px; } .it-mats span { display: flex; align-items: center; gap: 4px; } .it-mats .ic { width: 12px; height: 12px; color: var(--bronze); } .it-mats b { color: var(--bone); }
.old-roll { font-size: 11px; color: var(--bone-dim); margin-top: 6px; } .old-roll small { color: var(--bronze); }
.modal-card .btn-col { gap: 6px; }
/* Özel sekme */
.sp-list { display: flex; flex-direction: column; gap: 6px; }
.sp-row { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.3); border: 1px dashed rgba(69,216,200,.4); border-radius: 7px; padding: 10px 12px; cursor: pointer; } .sp-row.locked { opacity: .55; border-color: rgba(255,255,255,.1); }
.sp-row .ic-stat { color: var(--teal); flex: none; } .sp-main { flex: 1; min-width: 0; } .sp-main b { font-size: 13px; display: flex; gap: 8px; align-items: baseline; } .sp-main b em { font-style: normal; font-size: 10px; color: var(--bone-dim); } .sp-main small { display: block; font-size: 10px; color: var(--teal); } .sp-main .bar { margin-top: 4px; height: 3px; }
.sp-row .chev { width: 14px; height: 14px; color: var(--bone-dim); }
/* Çanta kutuları */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.tile { position: relative; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.5)); border: 1px solid rgba(184,137,58,.3); border-radius: 8px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; min-height: 100px; }
.tile:hover { border-color: var(--gold); box-shadow: 0 0 10px rgba(230,191,90,.25); }
.tile-ico { width: 44px; height: 44px; border-radius: 8px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), rgba(0,0,0,.5)); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; } .tile-ico .ic { width: 26px; height: 26px; color: var(--gold); }
.tile.rare .tile-ico .ic { color: #b96bff; } .tile.rare { border-color: rgba(185,107,255,.45); }
.tile-cnt { position: absolute; right: 5px; top: 4px; background: rgba(0,0,0,.75); border: 1px solid rgba(184,137,58,.4); border-radius: 4px; padding: 1px 5px; font-size: 10px; font-weight: 700; color: var(--bone); }
.tile b { font-size: 10px; text-align: center; line-height: 1.2; color: var(--bone); max-height: 2.4em; overflow: hidden; }
@media (max-width: 700px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } .it-head { margin-right: 28px; } }
.chest-row.boss { border-color: rgba(201,64,63,.45); background: rgba(201,64,63,.06); } .chest-row.boss .chest-ico .ic { color: var(--blood); }
.result.boss { border-color: rgba(201,64,63,.4); }

/* Intro / yükleme ekranı */
#splash { position: fixed; inset: 0; z-index: 60; background: radial-gradient(ellipse at 50% 30%, #1a2342 0%, #0b0f1c 60%, #05070d 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: opacity .5s ease; }
#splash.out { opacity: 0; pointer-events: none; } #splash.hidden { display: none; }
#splash::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(230,191,90,.08), transparent 55%); animation: spGlow 3s ease-in-out infinite; }
.sp-logo { font-family: 'Cinzel', serif; font-size: 64px; font-weight: 700; letter-spacing: .25em; color: var(--gold); text-shadow: 0 0 24px rgba(230,191,90,.45), 0 4px 0 #6a4a10; margin-left: .25em; animation: spIn .9s ease-out; }
.sp-sub { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .2em; color: var(--bone-dim); margin-top: -4px; }
.sp-bar { width: min(320px, 70vw); height: 6px; margin-top: 26px; background: rgba(0,0,0,.5); border: 1px solid rgba(184,137,58,.5); border-radius: 3px; overflow: hidden; }
.sp-bar .fill { height: 100%; width: 0; background: linear-gradient(90deg, #b8893a, #ffe9a0); box-shadow: 0 0 10px rgba(255,233,160,.6); transition: width .35s ease; }
.sp-text { font-size: 12px; color: var(--bone); letter-spacing: .05em; }
.sp-foot { position: absolute; bottom: calc(18px + var(--safe-bottom)); font-size: 10px; color: var(--bone-dim); letter-spacing: .1em; }
@keyframes spIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes spGlow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@media (max-width: 700px) { .sp-logo { font-size: 48px; } }
.lrow b em.pc { font-style: normal; font-size: 10px; color: var(--teal); margin-left: 6px; display: inline-flex; align-items: center; gap: 2px; } .lrow b em.pc .ic { width: 10px; height: 10px; }

/* Ekipman v3 */
.dslot.icon .rank { font-size: 8px; }
.dslot.icon s { position: absolute; left: 3px; bottom: 2px; font-size: 9px; text-decoration: none; }
.xp-row { display: flex; align-items: center; gap: 8px; } .xp-row .bar { flex: 1; height: 8px; position: relative; } .xp-row small { white-space: nowrap; font-size: 11px; color: var(--bone-dim); } .xp-row .gold { color: var(--gold); }
.bar .fill.ghost { position: absolute; left: 0; top: 0; height: 100%; background: rgba(230,191,90,.35); z-index: 0; }
.feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 5px; max-height: 220px; overflow-y: auto; padding: 2px; }
.feed-tile { position: relative; background: rgba(0,0,0,.35); border: 1px solid var(--rc); border-radius: 7px; padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.feed-tile .ic { width: 22px; height: 22px; color: var(--rc); } .feed-tile b { font-size: 10px; } .feed-tile small { font-size: 9px; color: var(--bone-dim); display: block; margin: 0; } .feed-tile em { font-style: normal; font-size: 10px; color: var(--teal); }
.feed-tile.on { background: rgba(230,191,90,.15); box-shadow: inset 0 0 0 2px var(--gold); }
.tile.gear { border-color: var(--rc); } .tile.gear .tile-ico .ic { color: var(--rc); } .tile.gear small { font-size: 9px; color: var(--bone-dim); }
.modal-card h3 em.muted { font-family: 'Manrope', sans-serif; letter-spacing: 0; color: var(--bone-dim); font-style: normal; }

/* Sefer */
.sefer-box { background: rgba(230,191,90,.06); border: 1px solid rgba(230,191,90,.35); border-radius: 8px; padding: 12px 14px; margin-top: 10px; }
.sefer-box h3 { font-family: 'Cinzel', serif; font-size: 13px; color: var(--gold); margin: 0 0 6px; } .sefer-box p { font-size: 12px; line-height: 1.5; margin: 0 0 6px; } .sefer-box .gold { color: var(--gold); }
.sefer-tree { display: flex; flex-direction: column; gap: 6px; }
.sfrow { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; padding: 8px 10px; } .sfrow.max { border-color: rgba(230,191,90,.4); }
.sfrow .ic-stat { color: var(--gold); flex: none; } .sf-main { flex: 1; min-width: 0; } .sf-main b { font-size: 12px; display: flex; gap: 6px; } .sf-main b em { font-style: normal; color: var(--bone-dim); font-size: 10px; } .sf-main small { display: block; font-size: 10px; color: var(--bone-dim); } .sf-main .teal { color: var(--teal); } .sf-main .bar { margin-top: 4px; height: 3px; }
.sfrow button { padding: 6px 10px; font-size: 11px; min-width: 56px; text-align: center; line-height: 1.1; } .sfrow button small { font-size: 9px; }
#btn-sefer { position: relative; } #btn-sefer .badge { position: static; display: none; margin-left: 6px; background: var(--teal); color: #000; }

#btn-tour { bottom: calc(202px + var(--safe-bottom)); } #btn-tour em { display: none; }
.bottom-nav { grid-template-columns: repeat(5, 1fr); }

/* ===== Karakter: Eatventure düzeni ===== */
.eq-top { display: grid; grid-template-columns: 76px 1fr 76px; gap: 8px; align-items: center; background: radial-gradient(ellipse at 50% 40%, rgba(80,140,200,.25), rgba(0,0,0,.25) 70%); border: 1px solid rgba(184,137,58,.3); border-radius: 10px; padding: 10px; }
.eq-col { display: flex; flex-direction: column; gap: 8px; }
.eq-slot { position: relative; aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,.92); border: 3px solid var(--rc); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.eq-slot .ic { width: 32px; height: 32px; color: #2a2f3a; } .eq-slot.on { outline: 2px solid var(--gold); outline-offset: 2px; }
.eq-slot em, .eq-card em { position: absolute; left: -2px; top: -2px; background: var(--rc); color: #fff; font-style: normal; font-weight: 800; font-size: 10px; padding: 1px 6px; border-radius: 8px 0 8px 0; }
.eq-slot u { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 8px; font-weight: 800; text-decoration: none; text-shadow: 0 1px 1px #000; }
.dot { position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #ff4a4a; box-shadow: 0 0 4px #ff4a4a; }
.eq-mid { display: flex; flex-direction: column; align-items: center; } #char-preview { width: 100%; max-width: 260px; aspect-ratio: 1; }
.eq-power { font-size: 11px; color: var(--bone-dim); } .eq-power b { color: var(--gold); } .eq-power .ic { width: 12px; height: 12px; }
.eq-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 10px 0 8px; }
.eq-tabs button { position: relative; background: #0f2a3a; border: 1px solid rgba(255,255,255,.08); border-radius: 8px 8px 0 0; padding: 8px 0; cursor: pointer; } .eq-tabs button .ic { width: 20px; height: 20px; color: #cfe3ee; } .eq-tabs button.on { background: #1d4e66; border-color: var(--gold); }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding: 4px 2px; }
.eq-card { position: relative; background: #fff; border: 3px solid var(--rc); border-radius: 10px; display: flex; flex-direction: column; align-items: center; cursor: pointer; overflow: hidden; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.eq-card .eq-ico { padding: 14px 0 4px; } .eq-card .eq-ico .ic { width: 30px; height: 30px; color: #2a2f3a; }
.eq-card small { font-size: 9px; font-weight: 800; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.eq-card b { width: 100%; text-align: center; background: var(--rc); color: #fff; font-size: 10px; padding: 3px 0; margin-top: 3px; }
.eq-card i { position: absolute; right: 4px; top: 3px; font-style: normal; font-size: 9px; font-weight: 800; color: #1a7a5a; }
.eq-card s { position: absolute; right: 3px; bottom: 22px; text-decoration: none; font-size: 10px; }
.eq-card.worn { box-shadow: 0 0 0 2px var(--gold), 0 3px 0 rgba(0,0,0,.3); } .worn-tag { position: absolute; top: 0; left: 0; right: 0; background: rgba(0,0,0,.75); color: #fff; font-size: 9px; text-align: center; padding: 1px 0; z-index: 1; }
.eq-card.feed.on { box-shadow: 0 0 0 3px var(--gold); filter: brightness(.85); } .eq-card.feed.on::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--gold); text-shadow: 0 2px 4px #000; }
/* Yükseltme penceresi */
.up-head { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 10px; padding: 12px; color: #2a2f3a; margin-right: 30px; }
.up-card { position: relative; width: 74px; flex: none; border: 3px solid var(--rc); border-radius: 10px; display: flex; flex-direction: column; align-items: center; overflow: hidden; background: #f4f6fa; }
.up-card .ic { width: 32px; height: 32px; margin: 16px 0 6px; color: #2a2f3a; } .up-card b { width: 100%; text-align: center; background: var(--rc); color: #fff; font-size: 10px; padding: 2px 0; } .up-card em { position: absolute; left: 0; top: 0; background: var(--rc); color: #fff; font-style: normal; font-weight: 800; font-size: 11px; padding: 1px 6px; border-radius: 0 0 8px 0; }
.up-info { flex: 1; min-width: 0; } .up-info h3 { margin: 0; font-size: 16px; color: #1c2230; font-family: 'Manrope', sans-serif; } .up-info small { color: #6b7280; font-size: 12px; } .up-info .gold { color: #c8901a; }
.up-bar { position: relative; height: 18px; background: #dfe3ea; border-radius: 9px; margin: 6px 0; overflow: hidden; } .up-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: #3aa0ff; border-radius: 9px; z-index: 1; } .up-bar .fill.ghost { background: rgba(58,160,255,.35); z-index: 0; } .up-bar span { position: relative; z-index: 2; display: block; text-align: center; font-size: 11px; font-weight: 800; line-height: 18px; color: #1c2230; }
.up-eff { font-size: 13px; font-weight: 700; color: #4b5563; }
.up-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; } .up-act span { font-size: 12px; color: var(--bone-dim); } .up-act button { min-width: 120px; font-size: 15px; }
.up-rar { display: flex; justify-content: center; gap: 10px; margin: 6px 0 10px; } .up-rar button { width: 48px; height: 42px; border-radius: 8px; background: var(--rc); border: 2px solid rgba(255,255,255,.2); cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.35); } .up-rar button .ic { width: 22px; height: 22px; color: #fff; } .up-rar button.on { outline: 3px solid var(--gold); }
@media (max-width: 700px) { .eq-top { grid-template-columns: 64px 1fr 64px; } .eq-grid { grid-template-columns: repeat(4, 1fr); } .up-head { margin-right: 26px; } }

/* ===== Tur penceresi: sabit sekmeler, tek sütun ===== */
.tour-tabs { position: sticky; top: -1px; z-index: 3; background: var(--panel-bg, #121a2e); padding: 2px 0 8px; margin-bottom: 4px; }
.tour-stack > * { margin-bottom: 10px; }
.up-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .up-bar-top .mats { margin: 0; flex: 1; }
.mul { display: flex; gap: 4px; } .mul button { padding: 6px 10px; font-size: 12px; min-width: 44px; } .mul button.on { border-color: var(--gold); color: var(--gold); }
.up-list { display: flex; flex-direction: column; gap: 6px; }
.up-row { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 8px 10px; }
.up-row .ic-stat { color: var(--gold); flex: none; } .up-main { flex: 1; min-width: 0; } .up-main b { font-size: 13px; display: flex; gap: 6px; align-items: baseline; } .up-main b em { font-style: normal; font-size: 11px; color: var(--teal); } .up-main small { font-size: 11px; color: var(--bone-dim); }
.up-arrow { width: 64px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 4px 5px !important; border-radius: 8px; background: #2a2f3a; border: 1px solid rgba(255,255,255,.1); cursor: pointer; }
.up-arrow .arr { font-size: 22px; font-weight: 900; line-height: 1; color: #6b7280; } .up-arrow small { font-size: 10px; display: flex; align-items: center; gap: 2px; color: var(--bone-dim); } .up-arrow small .ic { width: 10px; height: 10px; }
.up-arrow.ready { background: linear-gradient(180deg, #3ccf6a, #1f8a43); border-color: #6dff9a; box-shadow: 0 3px 0 #0e5226; } .up-arrow.ready .arr { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); } .up-arrow.ready small { color: #eafff0; }
.maxed { font-size: 11px; color: var(--gold); width: 64px; text-align: center; }
#btn-tour em { display: none; position: absolute; top: -6px; left: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--blood); color: #fff; font: 900 12px/18px 'Manrope', sans-serif; font-style: normal; align-items: center; justify-content: center; box-shadow: 0 0 8px rgba(255,60,60,.7); }
.bottom-nav button .badge { align-items: center; justify-content: center; }
/* Eşya penceresi sade */
.it-stat i.up { color: #4fd08a; } .it-stat i.down { color: #ff7a6a; } .cmp-note { font-size: 11px; color: var(--bone-dim); margin: 4px 0 8px; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; } .btn-grid button { justify-content: center; }
.it-head .it-ico em { display: none; }

.bottom-nav { grid-template-columns: repeat(6, 1fr); }

/* ===== Klan ===== */
.clan-create { background: rgba(230,191,90,.06); border: 1px solid rgba(230,191,90,.3); border-radius: 10px; padding: 12px; margin-bottom: 10px; } .clan-create h3 { margin: 0 0 8px; font-family: 'Cinzel', serif; color: var(--gold); font-size: 14px; }
.form.two { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; } .clan-create button { margin-top: 8px; width: 100%; }
.clan-search { display: flex; gap: 6px; margin-bottom: 8px; } .clan-search input { flex: 1; background: rgba(0,0,0,.4); border: 1px solid var(--plaque-border); border-radius: 6px; color: var(--bone); padding: 8px 10px; font: 13px 'Manrope', sans-serif; }
.clan-list { display: flex; flex-direction: column; gap: 6px; }
.clan-row { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 8px 10px; }
.tag { flex: none; min-width: 42px; text-align: center; padding: 6px 6px; border-radius: 6px; background: linear-gradient(180deg, #3a2c10, #1e160a); border: 1px solid var(--gold); color: var(--gold); font: 800 12px 'Cinzel', serif; letter-spacing: .05em; } .tag.big { min-width: 56px; padding: 12px 8px; font-size: 15px; }
.clan-row .rank { width: 24px; text-align: center; color: var(--bone-dim); font-weight: 800; }
.cl-main { flex: 1; min-width: 0; } .cl-main b { font-size: 14px; display: flex; gap: 6px; align-items: center; } .cl-main small { font-size: 11px; color: var(--bone-dim); } .cl-main .lead { font-style: normal; font-size: 9px; color: #000; background: var(--gold); border-radius: 4px; padding: 1px 5px; }
.clan-head { display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, rgba(230,191,90,.12), rgba(0,0,0,.3)); border: 1px solid rgba(230,191,90,.35); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.pass-bar { position: relative; height: 18px; background: rgba(0,0,0,.5); border: 1px solid rgba(230,191,90,.4); border-radius: 9px; overflow: hidden; margin-top: 6px; } .pass-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #b8893a, #ffe9a0); } .pass-bar span { position: relative; display: block; text-align: center; font: 800 11px/18px 'Manrope', sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.pass-list { display: flex; flex-direction: column; gap: 5px; }
.pass-row { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.05); border-radius: 8px; padding: 7px 10px; opacity: .65; }
.pass-row.reached { opacity: 1; border-color: rgba(230,191,90,.4); } .pass-row.got { opacity: .55; }
.pass-row .pl { width: 30px; height: 30px; flex: none; border-radius: 50%; background: rgba(230,191,90,.15); border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; }
.pass-row .pr { flex: 1; display: flex; flex-direction: column; font-size: 13px; font-weight: 800; color: var(--bone); } .pass-row .pr .ic { width: 13px; height: 13px; color: var(--gold); margin: 0 2px 0 6px; } .pass-row .pr small { font-weight: 500; font-size: 10px; color: var(--bone-dim); }
.pass-row button { min-width: 64px; } .pass-row .pg .ic { width: 20px; height: 20px; color: #4fd08a; }
.up-rar button { width: auto; padding: 0 12px; color: #fff; font: 800 11px 'Manrope', sans-serif; }

/* Antrenman/Yetenek satırları */
.skrow .sk-now { margin-top: 3px; font-size: 12px; color: var(--bone); } .skrow .sk-now span { color: var(--bone-dim); margin: 0 3px; } .skrow .sk-now b { color: #6dff9a; }
.skrow .sk-btns button small { display: flex; align-items: center; justify-content: center; gap: 2px; } .skrow .sk-btns button small .ic { width: 10px; height: 10px; }
.skrow .ic-stat { color: var(--gold); }
/* Tur tuşu: dolgun yükseltme oku */
#btn-tour .ic { width: 24px; height: 24px; color: #6dff9a; filter: drop-shadow(0 1px 0 #0e5226); }
/* Tema onay penceresi */
.confirm-box { text-align: center; padding: 6px 4px 2px; } .confirm-ico .ic-big { width: 38px; height: 38px; color: var(--gold); } .confirm-box h3 { font-family: 'Cinzel', serif; color: var(--gold); margin: 6px 0 10px; font-size: 16px; }
.confirm-box .confirm-lines { font-size: 13px; color: var(--bone); line-height: 1.6; margin-bottom: 14px; } .confirm-box .btn-grid { margin-top: 0; }

#btn-tour .ic { color: var(--gold); filter: drop-shadow(0 1px 0 #5a3c0a) drop-shadow(0 0 4px rgba(230,191,90,.45)); }

/* ===== Nadirlik kartları: içten dışa geçişli ===== */
.eq-slot, .eq-card, .up-card { background: radial-gradient(circle at 50% 38%, var(--ri, #f6f8fa) 0%, var(--rm, #cfd5dc) 58%, var(--rc, #9aa3ad) 100%); border: 2px solid var(--rd, #5c6570); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -8px 14px rgba(0,0,0,.16), 0 3px 0 rgba(0,0,0,.4); }
.eq-slot .ic, .eq-card .eq-ico .ic, .up-card .ic { color: #1f2430; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
.eq-slot em, .eq-card em, .up-card em { background: linear-gradient(180deg, var(--rc), var(--rd)); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.eq-card b, .up-card b { background: linear-gradient(180deg, var(--rc), var(--rd)); text-shadow: 0 1px 1px rgba(0,0,0,.45); letter-spacing: .02em; }
.eq-slot.on { outline: 2px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 12px rgba(230,191,90,.55), inset 0 0 0 1px rgba(255,255,255,.45); }
/* Binek / Pet */
.comp-slot, .comp-card { --ri: #fff6e0; --rm: #e6c37a; --rc: #b8893a; --rd: #6a4a14; }
.comp-slot.empty { --ri: #3a4150; --rm: #262c38; --rc: #171b24; --rd: #3a4150; } .comp-slot.empty .ic { color: #8a93a3; filter: none; }
.comp-slot u { position: absolute; bottom: 2px; left: 2px; right: 2px; text-align: center; font-size: 8px; font-weight: 800; text-decoration: none; color: #1f2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comp-slot.empty u { color: #8a93a3; }
.comp-card .pcs { font-size: 9px; font-weight: 700; color: #3a2a0a; margin-top: -2px; padding-bottom: 2px; }
.comp-card.locked { filter: grayscale(.85) brightness(.75); }
.eq-tabs.eight { grid-template-columns: repeat(8, 1fr); }
.eq-tabs button .dot { right: 4px; top: 4px; }

/* ===== Mobil: pencereler tam ekranı kaplamasın ===== */
@media (max-width: 700px) {
  #panel { left: 5vw; right: 5vw; width: auto; top: calc(7vh + var(--safe-top)); bottom: calc(64px + var(--safe-bottom)); height: auto; max-height: none; border-radius: 10px; border: 1px solid var(--plaque-border); }
  #modal { padding: 7vh 5vw calc(4vh + var(--safe-bottom)); align-items: flex-start; }
  .modal-card { width: 100%; max-height: 100%; border-radius: 10px; }
}

/* Sağ kenar: Boss · Gelişim · Sohbet */
.bottom-nav { grid-template-columns: repeat(5, 1fr); }
#btn-boss { bottom: calc(254px + var(--safe-bottom)); } #btn-boss .ic { width: 22px; height: 22px; color: var(--gold); filter: drop-shadow(0 1px 0 #5a3c0a); }
#btn-boss em { display: none; position: absolute; top: -6px; left: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--blood); color: #fff; font: 800 11px/18px 'Manrope', sans-serif; font-style: normal; align-items: center; justify-content: center; box-shadow: 0 0 8px rgba(255,60,60,.7); }

/* ===== Rehber: her pencerenin üstünde ===== */
#tutorial { position: fixed; left: 0; right: 0; bottom: calc(78px + var(--safe-bottom)); z-index: 80; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.tut-card { position: relative; overflow: hidden; border: 1px solid var(--gold); background: linear-gradient(180deg, #1b2440, #0d1222); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 14px 40px rgba(0,0,0,.7), 0 0 24px rgba(230,191,90,.18); animation: tutIn .35s ease-out; }
.tut-bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255,255,255,.06); } .tut-bar .fill { height: 100%; background: linear-gradient(90deg, #b8893a, #ffe9a0); transition: width .35s; }
.tut-step { margin-top: 4px; font-size: 12px; } .tut-text { font-size: 13px; }
.tut-btns button.primary { background: linear-gradient(180deg, #d9b25a, #8a6a1e); border-color: #ffe9a0; color: #1a1205; }
@keyframes tutIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tut-hl { position: relative; z-index: 81 !important; box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(230,191,90,.8) !important; animation: tutPulse 1.2s ease-in-out infinite; }
@keyframes tutPulse { 50% { box-shadow: 0 0 0 3px #ffe9a0, 0 0 28px rgba(255,233,160,.95); } }
#panel.visible ~ #tutorial, #panel.visible + #tutorial { }
@media (max-width: 700px) { #tutorial { bottom: calc(70px + var(--safe-bottom)); } #panel { bottom: calc(64px + var(--safe-bottom)); } }
/* Alt menü 6 tuş, Mesajlar */
.bottom-nav { grid-template-columns: repeat(6, 1fr); }
#log-fab { display: none !important; }
#nav-chat.active { border-color: var(--gold); color: var(--gold); }
#log { bottom: calc(72px + var(--safe-bottom)) !important; z-index: 40; }

/* =========================================================
   KLAN v2
   ========================================================= */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(220%); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,233,160,.6), 0 0 10px rgba(230,191,90,.35); } 50% { box-shadow: 0 0 0 2px #ffe9a0, 0 0 22px rgba(255,233,160,.8); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.clan-loading { display: flex; justify-content: center; padding: 40px 0; } .clan-loading .spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(230,191,90,.2); border-top-color: var(--gold); animation: spin .8s linear infinite; }
.crest { display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
/* kurma kartı */
.clan-hero { position: relative; display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 15% 30%, rgba(230,191,90,.18), transparent 60%), linear-gradient(160deg, #1d2847, #0c1120); border: 1px solid rgba(230,191,90,.45); animation: fadeUp .35s ease-out; }
.clan-hero::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,233,160,.08), transparent); animation: shine 5s ease-in-out infinite; pointer-events: none; }
.ch-crest { flex: none; animation: floaty 3.5s ease-in-out infinite; } .ch-body { flex: 1; min-width: 0; }
.ch-body h2 { margin: 0; font-family: 'Cinzel', serif; font-size: 18px; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.5); } .ch-body p { margin: 4px 0 10px; font-size: 12px; color: var(--bone-dim); line-height: 1.45; }
.ch-form { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; margin-bottom: 10px; }
.ch-form label { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ch-form label span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); font-weight: 800; }
.ch-form input, .clan-search input { width: 100%; box-sizing: border-box; min-width: 0; background: rgba(0,0,0,.45); border: 1px solid rgba(230,191,90,.3); border-radius: 8px; color: var(--bone); padding: 10px 12px; font: 600 14px 'Manrope', sans-serif; outline: none; transition: border-color .15s, box-shadow .15s; }
.ch-form input:focus, .clan-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(230,191,90,.18); }
.ch-form .tagf input { text-transform: uppercase; text-align: center; font-family: 'Cinzel', serif; letter-spacing: .1em; }
button.big { width: 100%; padding: 12px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; } button.big .cost { display: inline-flex; align-items: center; gap: 3px; background: rgba(0,0,0,.25); padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.ch-body .lack { display: block; text-align: center; margin-top: 6px; color: #ff8a80; font-size: 11px; }
.clan-sec { margin-top: 14px; } .clan-sec h3 { display: flex; justify-content: space-between; align-items: baseline; font-family: 'Cinzel', serif; font-size: 13px; color: var(--gold); margin: 0 0 8px; } .clan-sec h3 em { font-style: normal; font-family: 'Manrope', sans-serif; font-size: 11px; color: var(--bone-dim); letter-spacing: 0; text-transform: none; }
.clan-search { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 4px 4px 4px 10px; margin-bottom: 10px; } .clan-search > .ic { color: var(--bone-dim); } .clan-search input { border: 0; background: transparent; padding: 8px 4px; box-shadow: none !important; } .clan-search button { flex: none; }
.clan-cards { display: flex; flex-direction: column; gap: 8px; }
.clan-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(0,0,0,.25)); border: 1px solid rgba(255,255,255,.07); animation: fadeUp .35s ease-out both; animation-delay: var(--d); transition: border-color .15s, transform .15s; }
.clan-card:hover { border-color: rgba(230,191,90,.45); transform: translateY(-1px); }
.cc-main { flex: 1; min-width: 0; } .cc-main b { font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-meta { display: flex; gap: 10px; font-size: 11px; color: var(--bone-dim); margin: 2px 0 5px; } .cc-meta span { display: inline-flex; align-items: center; gap: 3px; } .cc-meta .ic { width: 11px; height: 11px; color: var(--gold); }
.cc-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; } .cc-bar div { height: 100%; background: linear-gradient(90deg, #3fbf62, #9be86a); }
.clan-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 10px; border: 1px dashed rgba(230,191,90,.3); border-radius: 12px; color: var(--bone-dim); text-align: center; } .clan-empty .ic-big { width: 34px; height: 34px; color: var(--gold); opacity: .7; } .clan-empty b { color: var(--bone); font-size: 14px; }
/* klan başlığı */
.clan-banner { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; overflow: hidden; margin-bottom: 10px; background: radial-gradient(ellipse at 10% 20%, rgba(230,191,90,.2), transparent 55%), linear-gradient(160deg, #1f2a4a, #0b1020); border: 1px solid rgba(230,191,90,.5); animation: fadeUp .3s ease-out; }
.clan-banner::after { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; background: linear-gradient(100deg, transparent, rgba(255,233,160,.07), transparent); animation: shine 6s ease-in-out infinite; pointer-events: none; }
.cb-crest { flex: none; animation: floaty 4s ease-in-out infinite; } .cb-main { flex: 1; min-width: 0; }
.cb-main h2 { margin: 0 0 6px; font-family: 'Cinzel', serif; font-size: 18px; color: #ffe9a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.cb-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(230,191,90,.25); font-size: 11px; font-weight: 700; color: var(--bone); } .chip .ic { width: 11px; height: 11px; color: var(--gold); }
.cb-xp { position: relative; height: 16px; border-radius: 8px; background: rgba(0,0,0,.5); border: 1px solid rgba(230,191,90,.35); overflow: hidden; }
.cb-xp .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8a6a1e, #e6bf5a 70%, #ffe9a0); transition: width .6s ease; overflow: hidden; }
.cb-xp .fill::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation: shine 2.4s ease-in-out infinite; }
.cb-xp span { position: relative; display: block; text-align: center; font: 800 10px/16px 'Manrope', sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.lv-ring { flex: none; width: var(--s); height: var(--s); border-radius: 50%; padding: 4px; background: conic-gradient(#ffe9a0 calc(var(--p) * 1%), rgba(255,255,255,.08) 0); box-shadow: 0 0 14px rgba(230,191,90,.35); }
.lv-in { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2a3557, #0d1222); display: flex; flex-direction: column; align-items: center; justify-content: center; } .lv-in b { font: 900 22px/1 'Cinzel', serif; color: #ffe9a0; } .lv-in small { font-size: 7px; letter-spacing: .14em; color: var(--bone-dim); font-weight: 800; }
/* ödül yolu */
.pass-track { position: relative; padding-left: 4px; } .pass-track::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, rgba(230,191,90,.6), rgba(255,255,255,.06)); }
.pt-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 0; animation: fadeUp .3s ease-out both; animation-delay: var(--d); }
.pt-node { flex: none; position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #121827; border: 2px solid rgba(255,255,255,.12); color: var(--bone-dim); font: 900 13px 'Cinzel', serif; }
.pt-row.reached .pt-node { background: radial-gradient(circle at 50% 35%, #ffe9a0, #b8893a 70%, #6a4a14); border-color: #ffe9a0; color: #2a1d05; box-shadow: 0 0 12px rgba(230,191,90,.55); }
.pt-row.cur .pt-node { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 3px rgba(230,191,90,.15); }
.pt-card { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); }
.pt-row.reached .pt-card { background: linear-gradient(135deg, rgba(230,191,90,.12), rgba(0,0,0,.3)); border-color: rgba(230,191,90,.35); }
.pt-row.ready .pt-card { animation: glowPulse 1.6s ease-in-out infinite; } .pt-row.got { opacity: .55; } .pt-row:not(.reached):not(.cur) { opacity: .7; }
.pt-rw { display: flex; flex-wrap: wrap; gap: 6px; }
.rw-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 5px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); } .rw-chip .ic { width: 15px; height: 15px; color: var(--gold); } .rw-chip b { font-size: 13px; color: #fff; } .rw-chip small { font-size: 10px; color: var(--bone-dim); }
.pt-mini { margin-top: 6px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; } .pt-mini div { height: 100%; background: linear-gradient(90deg, #b8893a, #ffe9a0); }
.pt-act { flex: none; width: 56px; display: flex; justify-content: center; } .pt-act button { padding: 7px 0; width: 56px; } .pt-got .ic { width: 22px; height: 22px; color: #4fd08a; } .pt-lock .ic { width: 16px; height: 16px; color: var(--bone-dim); }
/* bağış */
.don-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(230,191,90,.25); margin-bottom: 8px; }
.don-head small { display: block; font-size: 10px; color: var(--bone-dim); text-transform: uppercase; letter-spacing: .06em; } .don-head b { font-size: 14px; } .don-head .gold { color: var(--gold); } .don-head button { grid-column: 1 / -1; }
/* üyeler */
.mem-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.mem-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); animation: fadeUp .3s ease-out both; animation-delay: var(--d); }
.mem-rank { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 900 12px 'Cinzel', serif; background: #121827; border: 1px solid rgba(255,255,255,.12); color: var(--bone-dim); }
.mem-row.top1 .mem-rank { background: radial-gradient(circle at 50% 35%, #fff2bf, #d9a83a); color: #3a2605; border-color: #ffe9a0; } .mem-row.top2 .mem-rank { background: radial-gradient(circle at 50% 35%, #ffffff, #a8b2c0); color: #2a2f3a; border-color: #e6ecf3; } .mem-row.top3 .mem-rank { background: radial-gradient(circle at 50% 35%, #ffd9b0, #b8702e); color: #3a1d05; border-color: #ffc89a; }
.mem-main { flex: 1; min-width: 0; } .mem-main b { display: flex; align-items: center; gap: 6px; font-size: 13px; } .mem-main small { font-size: 10px; color: var(--bone-dim); }
.mem-main .lead { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 9px; font-weight: 800; color: #2a1d05; background: linear-gradient(180deg, #ffe9a0, #c99a3e); border-radius: 6px; padding: 1px 6px; } .mem-main .lead .ic { width: 9px; height: 9px; color: #2a1d05; }
.mem-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.06); overflow: hidden; margin: 4px 0 2px; } .mem-bar div { height: 100%; background: linear-gradient(90deg, #b8893a, #ffe9a0); }
.ghost-danger { background: transparent !important; border: 1px solid rgba(255,90,90,.35) !important; color: #ff8a80 !important; width: 30px; height: 30px; padding: 0 !important; border-radius: 8px; }
@media (max-width: 700px) { .clan-hero { flex-direction: column; text-align: center; } .ch-body p { margin-bottom: 12px; } .clan-banner { padding: 12px; gap: 10px; } .cb-main h2 { font-size: 15px; } }

/* =========================================================
   SANDIK AÇILIŞI
   ========================================================= */
#reveal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 6vh 4vw; background: radial-gradient(ellipse at 50% 40%, rgba(40,55,95,.92), rgba(5,7,14,.96)); opacity: 0; transition: opacity .25s; }
#reveal.in { opacity: 1; }
#reveal.best3 { background: radial-gradient(ellipse at 50% 40%, rgba(90,50,150,.85), rgba(5,7,14,.96)); }
.rv-box { width: min(760px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 12px; }
.rv-head { text-align: center; } .rv-head h2 { margin: 0; font-family: 'Cinzel', serif; color: #ffe9a0; font-size: 20px; display: inline-flex; align-items: center; gap: 8px; text-shadow: 0 2px 0 #000, 0 0 18px rgba(230,191,90,.5); } .rv-head h2 .ic { width: 22px; height: 22px; } .rv-head small { color: var(--bone-dim); font-size: 12px; }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; overflow-y: auto; padding: 10px 6px; perspective: 900px; min-height: 0; }
.rv-card { aspect-ratio: 3 / 4; position: relative; animation: rvDeal .35s ease-out both; }
.rv-card:nth-child(n) { animation-delay: calc(var(--n, 0) * 1ms); }
.rv-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.8,.3,1.2); }
.rv-card.flip .rv-in { transform: rotateY(180deg); }
.rv-back, .rv-front { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.rv-back { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, rgba(230,191,90,.08) 0 6px, transparent 6px 12px), radial-gradient(circle at 50% 40%, #2a3557, #0d1222); border: 2px solid #b8893a; box-shadow: inset 0 0 0 1px rgba(255,233,160,.25), 0 4px 10px rgba(0,0,0,.6); }
.rv-back span .ic { width: 30px; height: 30px; color: var(--gold); opacity: .8; }
.rv-front { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: radial-gradient(circle at 50% 38%, var(--ri) 0%, var(--rm) 58%, var(--rc) 100%); border: 2px solid var(--rd); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 4px 12px rgba(0,0,0,.6); }
.rv-front em { position: absolute; left: 0; top: 0; z-index: 2; background: linear-gradient(180deg, var(--rc), var(--rd)); color: #fff; font: 800 11px 'Manrope', sans-serif; font-style: normal; padding: 1px 7px; border-radius: 0 0 8px 0; }
.rv-ico { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; } .rv-ico .ic { width: 36px; height: 36px; color: #1f2430; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
.rv-front b { position: relative; z-index: 2; width: 100%; text-align: center; background: linear-gradient(180deg, var(--rc), var(--rd)); color: #fff; font-size: 11px; padding: 3px 0 1px; text-shadow: 0 1px 1px rgba(0,0,0,.5); }
.rv-front small { position: relative; z-index: 2; width: 100%; text-align: center; background: var(--rd); color: rgba(255,255,255,.85); font-size: 9px; padding: 0 0 3px; }
.rv-rays { position: absolute; inset: -40%; z-index: 1; opacity: 0; pointer-events: none; }
/* nadirlik efektleri */
.rv-card.r2.flip .rv-front { animation: rvGlow2 1.6s ease-in-out infinite; }
.rv-card.r3.flip .rv-front { animation: rvGlow3 1.4s ease-in-out infinite; }
.rv-card.r3.flip .rv-rays { opacity: .55; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.55) 0 8deg, transparent 8deg 24deg); animation: rvSpin 6s linear infinite; mix-blend-mode: overlay; }
.rv-card.r4.flip .rv-front { animation: rvGlow4 1.2s ease-in-out infinite; }
.rv-card.r4.flip .rv-rays { opacity: .7; background: repeating-conic-gradient(from 0deg, rgba(255,240,180,.8) 0 6deg, transparent 6deg 18deg); animation: rvSpin 4s linear infinite; mix-blend-mode: overlay; }
.rv-card.r5.flip .rv-front { animation: rvGlow5 1s ease-in-out infinite; }
.rv-card.r5.flip .rv-rays { opacity: .85; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.9) 0 5deg, rgba(255,90,90,.3) 5deg 10deg, transparent 10deg 16deg); animation: rvSpin 2.5s linear infinite; mix-blend-mode: overlay; }
.rv-card.r3.flip, .rv-card.r4.flip, .rv-card.r5.flip { animation: rvPop .5s ease-out; z-index: 2; }
@keyframes rvDeal { from { opacity: 0; transform: translateY(18px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes rvPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes rvSpin { to { transform: rotate(360deg); } }
@keyframes rvGlow2 { 50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 0 14px rgba(63,191,98,.8); } }
@keyframes rvGlow3 { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 0 14px rgba(154,92,240,.7); } 50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 30px rgba(190,140,255,1); } }
@keyframes rvGlow4 { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 0 18px rgba(240,154,26,.8); } 50% { box-shadow: inset 0 0 0 2px #fff6e0, 0 0 40px rgba(255,200,90,1); } }
@keyframes rvGlow5 { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 0 22px rgba(229,57,63,.9); } 50% { box-shadow: inset 0 0 0 2px #fff, 0 0 50px rgba(255,120,120,1); } }
.rv-flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.8), transparent 60%); opacity: 0; }
#reveal.flash .rv-flash { animation: rvFlash .6s ease-out; } @keyframes rvFlash { 0% { opacity: .9; } 100% { opacity: 0; } }
#reveal.shake .rv-box { animation: rvShake .45s ease-in-out; } @keyframes rvShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.rv-mats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .rv-mat { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 7px; border-radius: 10px; background: rgba(0,0,0,.45); border: 1px solid rgba(230,191,90,.3); animation: rvDeal .4s ease-out both; } .rv-mat .ic { width: 16px; height: 16px; color: var(--gold); } .rv-mat b { color: #fff; font-size: 13px; } .rv-mat small { color: var(--bone-dim); font-size: 10px; }
.rv-btns { display: flex; justify-content: center; gap: 8px; } .rv-btns button { min-width: 130px; padding: 10px 16px; }
@media (max-width: 700px) { .rv-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; } .rv-ico .ic { width: 28px; height: 28px; } .rv-head h2 { font-size: 16px; } }

/* Rehber hedefi: pencere içindeki tuş */
.tut-target { position: relative; z-index: 3; outline: 3px solid #ffe9a0 !important; outline-offset: 2px; animation: tutTarget 1s ease-in-out infinite !important; }
.tut-target::after { content: "▼"; position: absolute; top: -26px; left: 50%; transform: translateX(-50%); color: #ffe9a0; font-size: 18px; text-shadow: 0 2px 4px #000; animation: tutArrow .8s ease-in-out infinite; pointer-events: none; z-index: 4; }
@keyframes tutTarget { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,233,160,.0), 0 0 14px rgba(230,191,90,.6); } 50% { box-shadow: 0 0 0 6px rgba(255,233,160,.25), 0 0 30px rgba(255,233,160,1); } }
@keyframes tutArrow { 50% { transform: translate(-50%, -6px); } }
#panel { z-index: 20; } #modal { z-index: 35; }
#tutorial { z-index: 85; } .tut-hl { z-index: 86 !important; }
@media (max-width: 700px) { #panel.visible ~ #tutorial .tut-card, .tut-card { max-height: 32vh; overflow: auto; } }

/* =========================================================
   EŞYA PENCERESİ v3
   ========================================================= */
.idt { display: flex; flex-direction: column; gap: 10px; }
.idt-top { display: flex; align-items: center; gap: 12px; padding: 12px; margin-right: 30px; border-radius: 12px; background: #141b30; background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 28%, #0d1222), #0d1222 70%); border: 1px solid var(--rc); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px color-mix(in srgb, var(--rc) 30%, transparent); }
.idt-card { position: relative; flex: none; width: 64px; height: 64px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, var(--ri) 0%, var(--rm) 58%, var(--rc) 100%); border: 2px solid var(--rd); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 3px 0 rgba(0,0,0,.4); }
.idt-card .ic { width: 36px; height: 36px; color: #1f2430; } .idt-card em { position: absolute; left: -3px; top: -3px; background: linear-gradient(180deg, var(--rc), var(--rd)); color: #fff; font: 800 11px 'Manrope', sans-serif; font-style: normal; padding: 1px 7px; border-radius: 8px 0 8px 0; }
.idt-name { flex: 1; min-width: 0; } .idt-name b { display: block; font-family: 'Cinzel', serif; font-size: 17px; color: #fff; text-shadow: 0 0 10px var(--rc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idt-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } .pill { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.12); color: var(--bone); }
.pill.rar { background: linear-gradient(180deg, var(--rc), var(--rd)); border-color: var(--ri); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.5); } .pill.on { border-color: var(--gold); color: var(--gold); }
.idt-box { border-radius: 12px; padding: 10px 12px; }
.idt-lbl { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .idt-lbl small { font-size: 10px; color: var(--bone-dim); }
.idt-lbl span { display: inline-flex; align-items: center; gap: 5px; font: 800 10px 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px 3px 7px; border-radius: 10px; } .idt-lbl span .ic { width: 12px; height: 12px; }
.idt-val { display: flex; align-items: baseline; gap: 8px; } .idt-val .nm { flex: 1; font-size: 13px; color: var(--bone); font-weight: 700; } .idt-val b { font-size: 24px; font-weight: 900; line-height: 1; }
.idt-desc { font-size: 11px; color: var(--bone-dim); margin-top: 4px; line-height: 1.4; }
/* sabit etki: nadirlik renkleri, kilit hissi */
.idt-box.fixed { background: #121a2e; background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 18%, #0b1020), #0b1020); border: 1px solid var(--rd); border-color: color-mix(in srgb, var(--rc) 70%, transparent); }
.tag-fixed { background: linear-gradient(180deg, var(--rc), var(--rd)); color: #fff; } .idt-box.fixed .idt-val b { color: var(--ri); text-shadow: 0 0 12px var(--rc); }
.idt-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 8px; } .idt-tiers span { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 10px; font-weight: 800; padding: 3px 0; border-radius: 6px; background: rgba(0,0,0,.35); color: var(--bone-dim); border: 1px solid transparent; }
.idt-tiers span i { width: 7px; height: 7px; border-radius: 50%; background: var(--rc); } .idt-tiers span.cur { background: linear-gradient(180deg, var(--rc), var(--rd)); color: #fff; border-color: var(--ri); box-shadow: 0 0 10px var(--rc); } .idt-tiers span.cur i { background: #fff; }
/* gelişim bonusu: yeşil, büyüme hissi */
.idt-box.grow { background: linear-gradient(135deg, rgba(60,207,106,.14), #0b1020 70%); border: 1px solid rgba(109,255,154,.4); }
.tag-grow { background: linear-gradient(180deg, #3ccf6a, #1f8a43); color: #fff; } .idt-box.grow .idt-val b { color: #6dff9a; text-shadow: 0 0 12px rgba(60,207,106,.6); }
.idt-next { font-size: 11px; color: var(--bone-dim); margin-top: 4px; } .idt-next b { color: #b8ffcc; }
.idt-xp { position: relative; height: 16px; border-radius: 8px; background: rgba(0,0,0,.5); border: 1px solid rgba(109,255,154,.3); overflow: hidden; margin-top: 8px; }
.idt-xp .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #1f8a43, #3ccf6a, #9bffb8); overflow: hidden; } .idt-xp .fill::after { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); animation: shine 2.6s ease-in-out infinite; }
.idt-xp span { position: relative; display: block; text-align: center; font: 800 10px/16px 'Manrope', sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
/* efsunlar */
.idt-box.ench { background: rgba(0,0,0,.28); border: 1px solid rgba(69,216,200,.25); } .tag-ench { background: linear-gradient(180deg, #2fb8a8, #136a60); color: #fff; }
/* karşılaştırma */
.cmp { font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 6px; } .cmp.up { color: #6dff9a; background: rgba(60,207,106,.15); } .cmp.down { color: #ff8a80; background: rgba(255,90,90,.12); } .cmp.eq { color: var(--bone-dim); }
.idt-cmp { font-size: 11px; color: var(--bone-dim); text-align: center; margin-top: -4px; }
@media (max-width: 700px) { .idt-top { margin-right: 26px; padding: 10px; } .idt-card { width: 56px; height: 56px; } .idt-name b { font-size: 15px; } .idt-val b { font-size: 21px; } }

.eq-slot.empty { background: radial-gradient(circle at 50% 40%, #2a3247, #121827); border: 2px dashed rgba(230,191,90,.35); box-shadow: inset 0 0 12px rgba(0,0,0,.5); } .eq-slot.empty .ic { color: #5d6780; filter: none; }

/* ===== Yetenekler: tek satır ===== */
.ur-list { display: flex; flex-direction: column; gap: 5px; }
.ur { display: grid; grid-template-columns: 30px minmax(0, 1fr) 96px auto; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border-radius: 9px; background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(0,0,0,.25)); border: 1px solid rgba(255,255,255,.06); }
.ur:hover { border-color: rgba(230,191,90,.3); }
.ur-ic { width: 22px; height: 22px; color: var(--gold); justify-self: center; }
.ur-main { min-width: 0; } .ur-main b { display: flex; align-items: baseline; gap: 6px; font-size: 13px; white-space: nowrap; } .ur-main b em { font-style: normal; font-size: 10px; font-weight: 800; color: var(--teal); }
.ur-main small { display: block; font-size: 10px; color: var(--bone-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur-val { text-align: right; line-height: 1.15; } .ur-val span { display: block; font-size: 13px; font-weight: 800; color: var(--bone); } .ur-val i { display: block; font-style: normal; font-size: 11px; font-weight: 800; color: #6dff9a; }
.ur-btns { display: flex; gap: 4px; } .ur-btns button { width: 58px; padding: 4px 2px !important; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.ur-btns button b { font-size: 12px; } .ur-btns button small { display: flex; align-items: center; gap: 2px; font-size: 9px; opacity: .9; } .ur-btns button small .ic { width: 9px; height: 9px; }
.ur-max { width: 182px; text-align: center; font: 800 11px 'Cinzel', serif; letter-spacing: .1em; color: var(--gold); }
@media (max-width: 700px) {
  .ur { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "ic main val" "btn btn btn"; row-gap: 6px; }
  .ur-ic { grid-area: ic; } .ur-main { grid-area: main; } .ur-val { grid-area: val; } .ur-btns { grid-area: btn; } .ur-btns button { flex: 1; width: auto; } .ur-max { width: 100%; }
}

/* =========================================================
   BÖLGE GÖREVİ (ekranda)
   ========================================================= */
#quest { position: absolute; top: calc(118px + var(--safe-top)); left: 12px; z-index: 6; width: 236px; padding: 9px 10px 10px; border-radius: 10px; background: linear-gradient(180deg, rgba(20,28,50,.92), rgba(9,13,24,.92)); border: 1px solid rgba(184,137,58,.45); box-shadow: 0 6px 18px rgba(0,0,0,.45); backdrop-filter: blur(4px); }
#quest.hidden { display: none; }
#quest.ready { border-color: #6dff9a; box-shadow: 0 0 0 1px rgba(109,255,154,.4), 0 0 18px rgba(60,207,106,.35); }
.q-top { display: flex; justify-content: space-between; align-items: baseline; } .q-top b { font-family: 'Cinzel', serif; font-size: 13px; color: var(--gold); } .q-top span { font-size: 10px; font-weight: 800; color: var(--bone-dim); }
.q-track { display: flex; gap: 2px; margin: 6px 0 7px; } .q-track i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); } .q-track i.done { background: linear-gradient(90deg, #b8893a, #ffe9a0); } .q-track i.cur { background: #6dff9a; box-shadow: 0 0 6px rgba(109,255,154,.7); }
.q-row { margin-bottom: 4px; } .q-row span { display: block; font-size: 11px; font-weight: 700; color: var(--bone); margin-bottom: 3px; } .q-row.ok span { color: #6dff9a; }
.q-row { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; } .q-row span { grid-column: 1 / -1; } .q-bar { height: 7px; border-radius: 4px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.08); overflow: hidden; } .q-bar div { height: 100%; background: linear-gradient(90deg, #8a6a1e, #ffe9a0); transition: width .3s; } .q-row.ok .q-bar div { background: linear-gradient(90deg, #1f8a43, #6dff9a); }
.q-row em { font-style: normal; font-size: 10px; font-weight: 800; color: var(--bone-dim); min-width: 54px; text-align: right; }
#q-next { width: 100%; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-radius: 8px; border: 1px solid #9bffb8; background: linear-gradient(180deg, #3ccf6a, #1f8a43); color: #fff; font: 800 13px 'Manrope', sans-serif; cursor: pointer; box-shadow: 0 3px 0 #0e5226; animation: qPulse 1.4s ease-in-out infinite; } #q-next.hidden { display: none; } #q-next b { font-size: 16px; }
@keyframes qPulse { 50% { box-shadow: 0 3px 0 #0e5226, 0 0 18px rgba(109,255,154,.8); } }
#buffs { top: auto !important; } #quest ~ #buffs { margin-top: 0; }
@media (max-width: 700px) { #quest { top: calc(104px + var(--safe-top)); left: 8px; width: 190px; padding: 7px 8px 8px; } }
/* Sağ kenar: Boss · Sandık · Gelişim */
#btn-boss { bottom: calc(306px + var(--safe-bottom)); } #btn-chest { bottom: calc(254px + var(--safe-bottom)); }
#btn-chest .ic { width: 22px; height: 22px; color: var(--gold); filter: drop-shadow(0 1px 0 #5a3c0a); }
#btn-chest em { display: none; position: absolute; top: -6px; left: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--blood); color: #fff; font: 800 11px/18px 'Manrope', sans-serif; font-style: normal; align-items: center; justify-content: center; box-shadow: 0 0 8px rgba(255,60,60,.7); }
/* Sandık penceresi */
.cpop { text-align: center; padding: 6px 2px 2px; } .cpop h2 { margin: 6px 0 0; font-family: 'Cinzel', serif; color: #ffe9a0; font-size: 20px; text-shadow: 0 2px 0 #000; }
.cpop-chest { position: relative; width: 110px; height: 110px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(255,233,160,.25), transparent 65%); animation: floaty 3s ease-in-out infinite; }
.cpop-chest .ic { width: 74px; height: 74px; color: var(--gold); filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(230,191,90,.5)); }
.cpop-glow { position: absolute; inset: -10px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,233,160,.18) 0 10deg, transparent 10deg 30deg); animation: rvSpin 12s linear infinite; z-index: -1; }
.cpop-count { font: 900 34px/1.1 'Cinzel', serif; color: #fff; text-shadow: 0 0 16px rgba(230,191,90,.6), 0 2px 0 #000; } .cpop small { display: block; color: var(--bone-dim); font-size: 11px; margin: 2px 0 14px; }
/* =========================================================
   AÇILIŞ EKRANI v2
   ========================================================= */
#reveal.rv2 { background: radial-gradient(ellipse at 50% 35%, #1d2a4d 0%, #070a14 70%); }
.rv-bg { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,233,160,.05) 0 6deg, transparent 6deg 18deg); animation: rvSpin 40s linear infinite; pointer-events: none; transition: background .4s; }
#reveal.bg3 .rv-bg { background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(170,110,255,.12) 0 6deg, transparent 6deg 18deg); }
#reveal.bg4 .rv-bg { background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,190,80,.16) 0 6deg, transparent 6deg 18deg); }
#reveal.bg5 .rv-bg { background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,90,90,.18) 0 6deg, transparent 6deg 18deg); }
.rv-box { position: relative; }
.rv-head { display: flex; flex-direction: column; align-items: center; gap: 6px; } .rv-rib { display: inline-flex; align-items: center; gap: 6px; padding: 5px 18px; border-radius: 4px; background: linear-gradient(180deg, #e6bf5a, #8a6a1e); color: #1a1205; font: 800 12px 'Cinzel', serif; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 3px 0 #4a3408, 0 0 18px rgba(230,191,90,.4); clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); } .rv-rib .ic { width: 14px; height: 14px; color: #1a1205; }
.rv-head h2 { font-size: 22px; } .rv-grid.single { grid-template-columns: 160px; justify-content: center; } .rv-grid.single .rv-ico .ic { width: 64px; height: 64px; }
.rv-card.charge .rv-in { animation: rvCharge .25s ease-in-out infinite; } .rv-card.charge .rv-back { box-shadow: 0 0 0 2px var(--rc), 0 0 26px var(--rc); border-color: var(--ri); }
@keyframes rvCharge { 0%, 100% { transform: rotate(-2deg) scale(1.02); } 50% { transform: rotate(2deg) scale(1.06); } }
.rv-sum { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .rv-sum.hidden { display: none; } .rv-sum span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(180deg, var(--rc), var(--rd)); box-shadow: 0 2px 0 rgba(0,0,0,.4); animation: rvDeal .35s ease-out both; } .rv-sum span i { width: 7px; height: 7px; border-radius: 50%; background: var(--ri); }
.rv-btns button { border-radius: 10px; font: 800 14px 'Manrope', sans-serif; padding: 12px 22px; min-width: 150px; cursor: pointer; transition: transform .12s, filter .12s; }
.rv-btns button:active { transform: translateY(2px); }
.rv-skip { background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18); color: var(--bone); }
.rv-ok { background: linear-gradient(180deg, #f0cf72 0%, #c99a3e 55%, #8a6a1e 100%); border: 1px solid #ffe9a0; color: #1a1205; box-shadow: 0 4px 0 #4a3408, 0 0 20px rgba(230,191,90,.35); text-shadow: 0 1px 0 rgba(255,255,255,.4); }
#reveal.done .rv-ok { animation: qPulse 1.6s ease-in-out infinite; }
/* panel: giriş animasyonları yalnızca ilk açılışta (yenilemede titreme yok) */
#panel:not(.fresh) .clan-card, #panel:not(.fresh) .pt-row, #panel:not(.fresh) .mem-row, #panel:not(.fresh) .clan-hero, #panel:not(.fresh) .clan-banner { animation: none !important; }

/* ===== Görev kutusu v2: sağ alt, şeffaf, kompakt ===== */
#quest { top: auto !important; left: auto !important; right: 56px; bottom: calc(84px + var(--safe-bottom)); width: 210px; padding: 7px 9px 8px; background: rgba(10,14,26,.55); border: 1px solid rgba(230,191,90,.28); box-shadow: 0 4px 14px rgba(0,0,0,.3); backdrop-filter: blur(3px); }
#quest .q-top { align-items: center; gap: 6px; cursor: pointer; } #quest .q-top b { flex: 1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #quest .q-top span { font-size: 10px; }
#q-next { width: 26px !important; height: 26px; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; font-size: 14px !important; flex: none; display: flex; align-items: center; justify-content: center; }
#q-next.hidden { display: none !important; }
#quest .q-track { margin: 5px 0 6px; } #quest .q-track i { height: 3px; }
#quest .q-row { display: flex; align-items: center; gap: 6px; margin: 0; } #quest .q-row + .q-row { margin-top: 4px; }
#quest .q-row span { flex: none; max-width: 86px; font-size: 10px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: auto; }
#quest .q-bar { position: relative; flex: 1; height: 15px; border-radius: 8px; } #quest .q-bar em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font: 800 9px 'Manrope', sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
#quest .q-rw { flex: none; display: inline-flex; align-items: center; gap: 1px; font-style: normal; font-size: 9px; font-weight: 800; color: #7ad8ff; } #quest .q-rw .ic { width: 10px; height: 10px; color: #7ad8ff; } #quest .q-row.ok .q-rw { opacity: .45; }
.map-title.hidden { display: none !important; }
@media (max-width: 700px) { #quest { right: 52px; width: 180px; bottom: calc(80px + var(--safe-bottom)); } #wallet { bottom: calc(80px + var(--safe-bottom)); } }
/* duyurular alt ortada */
#toasts { top: auto !important; bottom: calc(150px + var(--safe-bottom)); flex-direction: column-reverse; z-index: 70; }
@media (max-width: 700px) { #toasts { bottom: calc(176px + var(--safe-bottom)); } }
/* Kalıcı Bonuslar başlığı */
.perm-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; background: linear-gradient(135deg, rgba(122,216,255,.12), rgba(0,0,0,.3)); border: 1px solid rgba(122,216,255,.35); } .perm-head .ic-big { width: 30px; height: 30px; color: #7ad8ff; } .perm-head b { display: block; font-size: 16px; color: #fff; } .perm-head small { font-size: 11px; color: var(--bone-dim); }
/* Sandık türleri */
.cpop-types { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.ctype { display: flex; align-items: center; gap: 6px; padding: 6px 10px !important; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); color: var(--bone); cursor: pointer; } .ctype .ic { width: 16px; height: 16px; color: var(--gold); } .ctype span { font-size: 12px; font-weight: 700; } .ctype em { font-style: normal; font-size: 10px; font-weight: 800; background: var(--blood); color: #fff; border-radius: 8px; padding: 0 6px; }
.ctype.on { border-color: var(--gold); background: linear-gradient(180deg, rgba(230,191,90,.2), rgba(0,0,0,.35)); box-shadow: 0 0 10px rgba(230,191,90,.3); }

/* ===== Görev kartı v3: tamamlanınca kartın kendisi tuş ===== */
#quest { cursor: pointer; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.q-go { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; background: rgba(12,16,28,.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: opacity .25s; }
.q-go span { font: 900 40px/1 'Manrope', sans-serif; color: rgba(255,233,160,.8); text-shadow: 0 2px 0 rgba(90,60,10,.8), 0 0 18px rgba(230,191,90,.55); transform: translateX(-4px); animation: qArrow 1.4s ease-in-out infinite; }
#quest.ready { border-color: rgba(230,191,90,.75); box-shadow: 0 0 0 1px rgba(230,191,90,.35), 0 0 18px rgba(230,191,90,.3); }
#quest.ready .q-go { opacity: 1; }
#quest.ready:hover .q-go span, #quest.go .q-go span { color: #ffe9a0; }
#quest.go { animation: qGold .6s ease-out; }
@keyframes qArrow { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(6px); } }
@keyframes qGold { 0% { box-shadow: 0 0 0 0 rgba(255,233,160,.9), 0 0 0 rgba(255,233,160,0); } 40% { box-shadow: 0 0 0 4px rgba(255,233,160,.6), 0 0 40px rgba(255,233,160,.9); background: rgba(80,62,20,.7); } 100% { box-shadow: 0 0 0 0 rgba(255,233,160,0), 0 0 0 rgba(255,233,160,0); } }
#quest .q-row span { max-width: 92px; }
@media (max-width: 700px) {
  #quest { right: 0 !important; width: 186px; border-radius: 10px 0 0 10px; border-right: 0; bottom: calc(80px + var(--safe-bottom)); }
}
/* ===== Boss penceresi: etap bossları ===== */
.bs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, rgba(201,64,63,.18), rgba(0,0,0,.3)); border: 1px solid rgba(201,64,63,.4); margin-bottom: 8px; }
.bs-head b { display: block; font-family: 'Cinzel', serif; font-size: 16px; color: #ffe9a0; } .bs-head small { font-size: 11px; color: var(--bone-dim); }
.bs-dps { text-align: right; font-size: 16px; font-weight: 900; color: #fff; display: flex; flex-direction: column; align-items: flex-end; } .bs-dps .ic { width: 14px; height: 14px; color: var(--gold); } .bs-dps small { font-size: 9px; color: var(--bone-dim); font-weight: 700; }
.bs-sec { font-family: 'Cinzel', serif; font-size: 12px; color: var(--gold); margin: 10px 0 6px; }
.bs-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; margin-bottom: 6px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.07); }
.bs-card.cur { border-color: rgba(230,191,90,.45); background: linear-gradient(135deg, rgba(230,191,90,.1), rgba(0,0,0,.3)); } .bs-card.cur.lose { border-color: rgba(201,64,63,.5); } .bs-card.later { opacity: .55; } .bs-card.killed { opacity: .6; }
.bs-ico { flex: none; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #3a1d1d, #120a0a); border: 1px solid rgba(201,64,63,.5); } .bs-ico .ic { width: 26px; height: 26px; color: #ff8a80; }
.bs-main { flex: 1; min-width: 0; } .bs-main b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bs-main small { font-size: 10px; color: var(--bone-dim); }
.bs-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 11px; font-weight: 700; } .bs-stats span { display: inline-flex; align-items: center; gap: 3px; } .bs-stats .ic { width: 11px; height: 11px; color: var(--gold); } .bs-stats .ok { color: #6dff9a; } .bs-stats .ok .ic { color: #6dff9a; } .bs-stats .bad { color: #ff8a80; } .bs-stats .bad .ic { color: #ff8a80; }
.bs-act { display: flex; gap: 4px; align-items: center; } .bs-act button { min-width: 74px; } .bs-act button.info { min-width: 34px; width: 34px; padding: 6px 0; }
.bs-done { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: #6dff9a; min-width: 74px; justify-content: center; } .bs-done .ic { width: 14px; height: 14px; }
.bs-lock { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--bone-dim); min-width: 74px; justify-content: center; } .bs-lock .ic { width: 12px; height: 12px; }

/* ===== Rehber her zaman en üstte, vurgulanan öğe onu örtmez ===== */
#tutorial { z-index: 200 !important; transition: opacity .2s, transform .25s; }
#tutorial .tut-card { pointer-events: auto; }
.tut-hl { z-index: 84 !important; }
#tutorial.at-top { bottom: auto !important; top: calc(96px + var(--safe-top)); }
#tutorial.dim { opacity: 0; pointer-events: none !important; transform: translateY(12px); }
#tutorial.dim .tut-card { pointer-events: none; }
@media (max-width: 700px) { #tutorial.at-top { top: calc(84px + var(--safe-top)); } }

.pt-row.ready { cursor: pointer; } .pt-row.ready:hover .pt-card { border-color: #ffe9a0; }
.pt-take { display: inline-flex; align-items: center; justify-content: center; width: 56px; padding: 7px 0; border-radius: 8px; background: linear-gradient(180deg, #f0cf72, #8a6a1e); color: #1a1205; font: 900 12px 'Manrope', sans-serif; letter-spacing: .08em; box-shadow: 0 3px 0 #4a3408; }
.ur-max { font-size: 10px; }

/* görev kartı: özet satırı, dokununca liste açılır */
#quest #q-list { display: none; } #quest.open #q-list { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(230,191,90,.2); }
#quest .q-sum { display: flex; align-items: center; gap: 6px; } #quest .q-sum span { font-size: 10px; font-weight: 800; color: var(--bone); }
#quest .q-sum .q-bar { position: relative; flex: 1; height: 15px; border-radius: 8px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
#quest .q-sum .q-bar > div { height: 100%; background: linear-gradient(90deg, #8a6a1e, #ffe9a0); transition: width .3s; }
#quest.open { width: 230px; } @media (max-width: 700px) { #quest.open { width: 210px; } }

#wallet { top: calc(112px + var(--safe-top)) !important; bottom: auto !important; left: 12px !important; right: auto !important; }
#buffs { position: absolute !important; top: calc(150px + var(--safe-top)) !important; left: 12px !important; display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; }
#buffs .buff { padding: 4px !important; } #buffs .bname, #buffs .btime { display: none !important; }
@media (max-width: 700px) { #wallet { top: calc(98px + var(--safe-top)) !important; left: 8px !important; } #buffs { top: calc(134px + var(--safe-top)) !important; left: 8px !important; } }
.q-go b { position: absolute; bottom: 4px; font: 900 10px 'Cinzel', serif; letter-spacing: .2em; color: #b8f0ff; }
#quest.sefer.ready { border-color: #7ad8ff; box-shadow: 0 0 0 1px rgba(122,216,255,.4), 0 0 20px rgba(122,216,255,.4); } #quest.sefer .q-go span { color: rgba(184,240,255,.9); }
.bag-cap { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bone-dim); margin: 6px 0; } .bag-cap .ic { width: 14px; height: 14px; color: var(--gold); } .bag-cap b { color: var(--bone); }

/* Eşya görselleri */
img.itm { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: middle; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.eq-slot img.itm { width: 70%; height: 70%; } .eq-card .eq-ico img.itm, .rv-ico img.itm { width: 64px; height: 64px; } .idt-card img.itm { width: 54px; height: 54px; }
.eq-tabs button img.itm { width: 26px; height: 26px; } .comp-slot img.itm { width: 62%; height: 62%; }
.eq-slot.empty img.itm { filter: grayscale(1) brightness(.5); opacity: .55; }

.bottom-nav { grid-template-columns: repeat(5, 1fr) !important; } .bottom-nav button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 700px) { .bottom-nav button span { font-size: 9.5px; letter-spacing: -.01em; } .bottom-nav button .nav-ico { width: 20px; height: 20px; } }

/* ===== v136: oyun adı, oyuncu menüsü, engellenenler ===== */
#auth input.hidden { display: none; }
#namepick { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 35%, rgba(30,38,66,.92), rgba(6,8,16,.97)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#namepick.hidden { display: none; }
.np-box { width: min(360px, 100%); background: var(--plaque); border: 1px solid var(--plaque-border); border-radius: 10px; padding: 24px 22px 18px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,233,160,.08); animation: npIn .35s cubic-bezier(.2,.9,.3,1.2); display: flex; flex-direction: column; gap: 10px; }
@keyframes npIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.np-ico { width: 54px; height: 54px; margin: 0 auto 2px; border-radius: 50%; display: grid; place-items: center; color: var(--gold);
  background: radial-gradient(circle at 40% 35%, rgba(230,191,90,.25), rgba(0,0,0,.3)); border: 1px solid var(--plaque-border); }
.np-ico .ic { width: 26px; height: 26px; }
.np-box h2 { font-family: 'Cinzel', serif; color: var(--gold); font-size: 19px; letter-spacing: .05em; }
.np-box p { font-size: 12.5px; color: var(--bone-dim); line-height: 1.5; }
#np-input { background: rgba(0,0,0,.45); border: 1px solid var(--plaque-border); border-radius: 5px; color: var(--bone); padding: 11px 12px; font: 600 15px 'Manrope', sans-serif;
  outline: none; text-align: center; -webkit-user-select: text; user-select: text; }
#np-input:focus { border-color: var(--gold); }
#log-body .lg.msg b[data-who] { cursor: pointer; }
#log-body .lg.msg:not(.me) b[data-who]:active { color: var(--gold); }
.pmenu { display: flex; flex-direction: column; gap: 10px; }
.pm-head { display: flex; align-items: center; gap: 10px; }
.pm-head .ic-big { color: var(--gold); }
.pm-head b { display: block; font-family: 'Cinzel', serif; color: var(--gold); font-size: 16px; }
.pm-head small { color: var(--bone-dim); font-size: 11.5px; }
.pm-quote { font-size: 13px; color: var(--bone); background: rgba(0,0,0,.3); border-left: 2px solid var(--plaque-border); padding: 8px 10px; border-radius: 4px; word-break: break-word; }
.blist { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.brow2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; background: rgba(0,0,0,.25); border: 1px solid rgba(184,137,58,.25); border-radius: 5px; font-size: 13px; }
.brow2 button { font-size: 11.5px; padding: 5px 9px; }

/* =====================================================================
   v138 TASARIM KATMANI (body.ui2) — pencere sistemi, cüzdan, eşya kartı
   Ton: gece laciverti lake + yaldız. Tek imza: üstte yaldızlı plaka ve
   içinde canlı cüzdan. Hareket yalnızca dokunuşa cevap verir.
   ===================================================================== */
.ui2 {
  --w-bg: #0f1628; --w-bg2: #0a1020; --w-raise: #162039; --w-line: rgba(230,191,90,.22); --w-line2: rgba(230,191,90,.5);
  --w-gold: #e6bf5a; --w-gold-hi: #ffe7a6; --w-gold-lo: #8a6424; --w-text: #ece5d3; --w-dim: #98a0b3; --w-up: #6fe0a4; --w-dn: #ff8f86;
  --r-win: 16px; --r-card: 11px; --r-btn: 9px; --ease-out: cubic-bezier(.2,.9,.25,1.08); --ease-in: cubic-bezier(.5,0,.75,.2);
  --nav-top: 74px;
}
/* ---------- Arka perde ---------- */
.ui2 #scrim { position: fixed; inset: 0; z-index: 4; background: radial-gradient(ellipse at 50% 30%, rgba(8,12,24,.35), rgba(3,5,10,.72)); backdrop-filter: blur(3px) saturate(.8); -webkit-backdrop-filter: blur(3px) saturate(.8);
  opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.ui2 #scrim.on { opacity: 1; pointer-events: auto; }
/* ---------- Pencere ---------- */
.ui2 #panel { position: fixed; z-index: 6; left: 50%; top: auto; bottom: var(--nav-top); width: min(760px, calc(100% - 24px)); height: min(760px, calc(100% - var(--nav-top) - 20px - var(--safe-top)));
  max-height: none; transform: translate(-50%, 18px) scale(.985); opacity: 0; pointer-events: none; transition: none;
  background: linear-gradient(180deg, var(--w-raise) 0%, var(--w-bg) 18%, var(--w-bg2) 100%); border: 1px solid var(--w-line); border-radius: var(--r-win);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,231,166,.07); overflow: hidden; }
.ui2 #panel.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); animation: winIn .3s var(--ease-out); }
.ui2 #panel.closing { opacity: 0; transform: translate(-50%, 16px) scale(.985); transition: opacity .18s var(--ease-in), transform .18s var(--ease-in); pointer-events: none; animation: none; }
@keyframes winIn { from { opacity: 0; transform: translate(-50%, 22px) scale(.975); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.ui2 #panel.swap .panel-cols { animation: swapIn .24s ease-out; }
@keyframes swapIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ui2 .panel-grip { display: none; }
/* Yaldızlı plaka: başlık + canlı cüzdan + kapat */
.ui2 .panel-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 12px 11px 18px; border-bottom: 0;
  background: linear-gradient(180deg, rgba(255,231,166,.06), rgba(0,0,0,.18)); }
.ui2 .panel-head::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  border-top: 1px solid var(--w-line2); border-bottom: 1px solid rgba(230,191,90,.18); }
.ui2 .panel-title { flex: 1; min-width: 0; font: 700 17px/1.1 'Cinzel', serif; letter-spacing: .05em; color: var(--w-gold); text-shadow: 0 1px 0 rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui2 #panel-close, .ui2 #modal-close { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: var(--w-dim);
  background: rgba(0,0,0,.35); border: 1px solid var(--w-line); cursor: pointer; transition: color .15s, border-color .15s, transform .12s; }
.ui2 #panel-close:hover, .ui2 #modal-close:hover { color: var(--w-gold-hi); border-color: var(--w-line2); }
.ui2 #panel-close:active, .ui2 #modal-close:active { transform: scale(.92); }
/* Cüzdan çipleri */
.ui2 .win-wallet { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; min-width: 0; }
.ui2 .win-wallet:empty { display: none; }
.ui2 .wchip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 7px; border-radius: 999px; background: rgba(0,0,0,.45);
  border: 1px solid rgba(230,191,90,.25); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); font: 800 12.5px 'Manrope', sans-serif; color: var(--w-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui2 .wchip .ic { width: 15px; height: 15px; color: var(--w-gold); flex: none; }
.ui2 .wchip.w-diamond .ic { color: #8fd8ff; } .ui2 .wchip.w-scrollChg .ic, .ui2 .wchip.w-scrollAdd .ic, .ui2 .wchip.w-scrollFrag .ic { color: #c9a4ff; } .ui2 .wchip.w-talismanDust .ic { color: var(--teal); }
.ui2 .wchip.up { animation: wUp .5s ease-out; } .ui2 .wchip.down { animation: wDown .5s ease-out; }
@keyframes wUp { 0% { border-color: var(--w-up); box-shadow: 0 0 10px rgba(111,224,164,.45), inset 0 1px 2px rgba(0,0,0,.6); } 100% { } }
@keyframes wDown { 0% { border-color: var(--w-dn); transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }
/* İçerik alanı */
.ui2 .panel-cols { flex: 1; min-height: 0; }
.ui2 .panel-col { padding: 14px 16px 20px; }
.ui2 .panel-col h3, .ui2 .modal-card h3 { font: 700 12.5px 'Cinzel', serif; letter-spacing: .06em; color: var(--w-gold); margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; }
.ui2 .panel-col h3::after, .ui2 .modal-card h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--w-line), transparent); }
.ui2 .panel-col::-webkit-scrollbar, .ui2 .modal-card::-webkit-scrollbar { width: 6px; } .ui2 .panel-col::-webkit-scrollbar-thumb, .ui2 .modal-card::-webkit-scrollbar-thumb { background: rgba(230,191,90,.25); border-radius: 3px; }
/* ---------- Tuşlar (pencere + açılır pencere) ---------- */
.ui2 .panel-col button, .ui2 .modal-card button { border-radius: var(--r-btn); border: 1px solid rgba(230,191,90,.22); background: linear-gradient(180deg, #1b2540, #121a2f);
  color: var(--w-text); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 0 rgba(0,0,0,.35); transition: transform .1s, filter .15s, border-color .15s; }
.ui2 .panel-col button:not(:disabled):active, .ui2 .modal-card button:not(:disabled):active { transform: translateY(1px) scale(.98); filter: brightness(1.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.ui2 .panel-col button.gold, .ui2 .modal-card button.gold { background: linear-gradient(180deg, #c99a3c 0%, #8a6424 55%, #6b4c18 100%); border-color: #f0cf7a; color: #fff6dc; text-shadow: 0 1px 0 rgba(60,35,0,.7);
  box-shadow: inset 0 1px 0 rgba(255,240,200,.45), 0 2px 0 rgba(0,0,0,.4); }
.ui2 .panel-col button.gold small, .ui2 .modal-card button.gold small { color: #ffe9b8; }
.ui2 .panel-col button.primary, .ui2 .modal-card button.primary { background: linear-gradient(180deg, #2f6aa0 0%, #1d4670 100%); border-color: #6fb6ff; color: #eef7ff; box-shadow: inset 0 1px 0 rgba(200,230,255,.3), 0 2px 0 rgba(0,0,0,.4); }
.ui2 .panel-col button.danger, .ui2 .modal-card button.danger { background: linear-gradient(180deg, #7a2b2b, #4a1818); border-color: #e0605c; }
.ui2 .modal-card button.ghost-danger { background: transparent; border-color: rgba(224,96,92,.45); color: #ffb3ad; box-shadow: none; }
.ui2 .panel-col button:disabled, .ui2 .modal-card button:disabled { opacity: .38; filter: saturate(.4); }
.ui2 .panel-col button:focus-visible, .ui2 .modal-card button:focus-visible, .ui2 #panel-close:focus-visible { outline: 2px solid var(--w-gold-hi); outline-offset: 2px; }
/* Gelişim satırları: tek bakışta isim, değer, tuşlar */
.ui2 .ur { border-radius: var(--r-card); background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(0,0,0,.2)); border: 1px solid rgba(255,255,255,.05); padding: 8px 10px; }
.ui2 .ur-btns button { height: 38px; }
/* ---------- Açılır pencere ---------- */
.ui2 #modal { z-index: 30; background: radial-gradient(ellipse at 50% 40%, rgba(6,10,20,.55), rgba(2,4,8,.82)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: calc(14px + var(--safe-top)) 14px calc(14px + var(--safe-bottom)); }
.ui2 #modal.closing { opacity: 0; transition: opacity .15s ease; }
.ui2 #modal.closing .modal-card { transform: translateY(8px) scale(.97); transition: transform .15s var(--ease-in); }
.ui2 .modal-card { width: min(440px, 100%); border-radius: var(--r-win); padding: 0 16px 16px; background: linear-gradient(180deg, var(--w-raise) 0%, var(--w-bg) 30%, var(--w-bg2) 100%);
  border: 1px solid var(--w-line2); box-shadow: 0 30px 90px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,231,166,.1); }
.ui2 .modal-card.pop { animation: popIn .26s var(--ease-out); }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
.ui2 .modal-card::before { left: 18px; right: 18px; opacity: .8; }
.ui2 #modal-wallet { position: sticky; top: 0; z-index: 2; min-height: 54px; margin: 0 -16px 12px; padding: 12px 56px 10px 16px; background: linear-gradient(180deg, var(--w-raise), rgba(15,22,40,.96)); border-bottom: 1px solid var(--w-line); }
.ui2 #modal-wallet:empty { display: flex; min-height: 54px; }
.ui2 #modal-close { position: absolute; top: 10px; right: 10px; z-index: 3; }
.ui2 .modal-card .detail-name { padding-right: 0; }
/* ---------- Eşya kartı ---------- */
.ui2 .ih { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--w-line); }
.ui2 .ih-ico { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 50% 38%, var(--ri) 0%, var(--rm) 60%, var(--rc) 100%); border: 2px solid var(--rd); box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 45%, transparent), inset 0 0 0 1px rgba(255,255,255,.45); }
.ui2 .ih-ico img.itm { width: 50px; height: 50px; }
.ui2 .ih-main { min-width: 0; }
.ui2 .ih-name { font: 700 16px/1.15 'Cinzel', serif; color: var(--rc); text-shadow: 0 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; filter: brightness(1.25); }
.ui2 .ih-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 5px 0 6px; font-size: 11px; color: var(--w-dim); font-weight: 700; }
.ui2 .ih-meta span { padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07); }
.ui2 .ih-meta .ih-rar { color: var(--rc); border-color: color-mix(in srgb, var(--rc) 45%, transparent); filter: brightness(1.2); }
.ui2 .ih-meta .ih-on { color: var(--w-up); border-color: rgba(111,224,164,.4); }
.ui2 .ih-xp { height: 5px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; } .ui2 .ih-xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--w-gold-lo), var(--w-gold)); }
.ui2 .ih-xpt { font-size: 10px !important; margin-top: 3px !important; color: var(--w-dim); }
.ui2 .ih-lock { width: 36px; height: 36px; padding: 0 !important; display: grid !important; place-items: center; align-self: start; border-radius: 50% !important; }
.ui2 .ih-lock .ic { width: 17px; height: 17px; color: var(--w-dim); } .ui2 .ih-lock.on .ic { color: var(--w-gold); } .ui2 .ih-lock.on { border-color: var(--w-line2) !important; }
.ui2 .itd-sec { padding: 10px 0 8px; border-bottom: 1px solid rgba(230,191,90,.12); }
.ui2 .itd-row { display: grid; grid-template-columns: 18px 1fr auto auto auto; align-items: center; gap: 7px; padding: 5px 2px; font-size: 13px; color: var(--w-text); }
.ui2 .itd-row .ic { width: 15px; height: 15px; color: var(--w-gold); }
.ui2 .itd-row b { font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; }
.ui2 .itd-row i { font-style: normal; font-size: 11px; color: var(--w-dim); font-variant-numeric: tabular-nums; }
.ui2 .itd-row em { font-style: normal; font-size: 11px; font-weight: 800; min-width: 50px; text-align: right; color: var(--w-dim); }
.ui2 .itd-row em.up { color: var(--w-up); } .ui2 .itd-row em.dn { color: var(--w-dn); }
.ui2 .itd-row.hd { grid-template-columns: 1fr auto; padding: 0 2px 4px; font: 700 11.5px 'Cinzel', serif; letter-spacing: .05em; color: var(--w-gold); }
.ui2 .itd-row.hd .cmp-h { font: 600 10.5px 'Manrope', sans-serif; letter-spacing: 0; color: var(--w-dim); }
.ui2 .itd-row.fx .ic { color: #8fd8ff; } .ui2 .itd-row.bn .ic { color: #c9a4ff; } .ui2 .itd-row.bn b { color: #e4d2ff; }
.ui2 .itd-empty { font-size: 12px; color: var(--w-dim); padding: 4px 2px; }
.ui2 .pips { display: inline-flex; gap: 3px; } .ui2 .pips i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.15); }
.ui2 .pips i.on { background: var(--w-gold); border-color: var(--w-gold-hi); box-shadow: 0 0 5px rgba(230,191,90,.6); }
.ui2 .itd-act { display: flex; gap: 8px; margin-top: 14px; } .ui2 .itd-act button { flex: 1 1 0; min-width: 0; }
.ui2 .itd-act button { height: 42px; text-align: center; justify-content: center; font-size: 13.5px; }
.ui2 .bn-list .bn { border-radius: 8px; }
/* ---------- Çanta karoları ---------- */
.ui2 .bag-cap { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 8px; font: 700 12.5px 'Cinzel', serif; color: var(--w-gold); }
.ui2 .bag-cap b { font: 600 11px 'Manrope', sans-serif; color: var(--w-dim); }
.ui2 .itile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.ui2 .panel-col button.itile { position: relative; aspect-ratio: 1; padding: 0; display: grid; place-items: center; border-radius: 12px;
  background: radial-gradient(circle at 50% 38%, var(--ri) 0%, var(--rm) 62%, var(--rc) 100%); border: 2px solid var(--rd);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 3px 0 rgba(0,0,0,.4); }
.ui2 .itile img.itm { width: 70%; height: 70%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.ui2 .itile em { position: absolute; right: 3px; bottom: 3px; min-width: 18px; padding: 1px 5px; border-radius: 7px; font: 800 10px 'Manrope', sans-serif; font-style: normal; color: #fff; background: rgba(10,14,26,.85); }
.ui2 .itile u { position: absolute; left: 3px; bottom: 3px; text-decoration: none; font: 800 9px 'Manrope', sans-serif; color: #e4d2ff; background: rgba(60,30,110,.85); border-radius: 6px; padding: 1px 4px; }
.ui2 .itile s { position: absolute; left: 3px; top: 3px; } .ui2 .itile s .ic { width: 13px; height: 13px; color: #3a2a08; }
.ui2 .itile span { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font: 800 9px 'Manrope', sans-serif; color: #062; background: var(--w-up); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.ui2 .itile.worn { box-shadow: 0 0 0 2px var(--w-up), 0 3px 0 rgba(0,0,0,.4); }
.ui2 .itile.new::after { content: ""; position: absolute; right: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #ff5c5c; box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
/* Ana ekran: pencere açıkken alt menü perdenin üstünde kalır */
.ui2 #hud { z-index: 5; }
.ui2 #hud > .top-left, .ui2 #hud > .top-right, .ui2 #hud > .side-fab, .ui2 #hud > #log-fab, .ui2 #hud > #quest, .ui2 #hud > #wallet, .ui2 #hud > .map-title, .ui2 #hud > #pause-banner, .ui2 #hud > #gear-menu { transition: opacity .2s ease; }
.ui2.win-open #hud > .top-left, .ui2.win-open #hud > .top-right, .ui2.win-open #hud > .side-fab, .ui2.win-open #hud > #log-fab, .ui2.win-open #hud > #quest, .ui2.win-open #hud > #wallet, .ui2.win-open #hud > .map-title, .ui2.win-open #hud > #pause-banner, .ui2.win-open #hud > #gear-menu { opacity: 0; pointer-events: none; }
/* ---------- Mobil: alttan açılan sayfa ---------- */
@media (max-width: 700px) {
  .ui2 #panel { left: 0; right: 0; width: 100%; top: calc(8px + var(--safe-top)); bottom: var(--nav-top); height: auto; border-radius: 18px 18px 14px 14px; transform: translateY(30px); }
  .ui2 #panel.visible { transform: none; animation: sheetIn .32s var(--ease-out); }
  .ui2 #panel.closing { transform: translateY(40px); }
  @keyframes sheetIn { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
  .ui2 .panel-grip { display: block; width: 40px; height: 4px; border-radius: 2px; background: rgba(230,191,90,.35); margin: 7px auto 0; }
  .ui2 .panel-head { padding: 6px 10px 10px 14px; gap: 8px; }
  .ui2 .panel-title { font-size: 15px; }
  .ui2 .wchip { height: 26px; padding: 0 8px 0 6px; font-size: 11.5px; } .ui2 .wchip .ic { width: 13px; height: 13px; }
  .ui2 #panel-wallet .wchip:nth-child(n+3) { display: none; }
  .ui2 .panel-col { padding: 10px 12px 18px; }
  .ui2 #modal { align-items: flex-end; padding: 10px 8px calc(10px + var(--safe-bottom)); }
  .ui2 .modal-card { width: 100%; max-height: calc(100% - 20px); border-radius: 18px; }
  .ui2 .itile-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui2 #panel.visible, .ui2 .modal-card.pop, .ui2 #panel.swap .panel-cols, .ui2 .wchip.up, .ui2 .wchip.down { animation: none !important; }
  .ui2 #panel.closing, .ui2 #modal.closing { transition: none !important; }
}
/* v138: açılır pencere başlığı (cüzdan yoksa), yükseltme ve onay pencereleri */
.ui2 #modal-wallet[data-title]:not([data-title=""])::before { content: attr(data-title); font: 700 15px 'Cinzel', serif; letter-spacing: .04em; color: var(--w-gold); margin-right: auto; }
.ui2 .up-head { background: rgba(0,0,0,.3); border: 1px solid var(--w-line); color: var(--w-text); margin-right: 0; border-radius: var(--r-card); }
.ui2 .up-info h3 { color: var(--w-text); font: 700 15px 'Cinzel', serif; margin: 0; } .ui2 .up-info h3::after { display: none; }
.ui2 .up-info small { color: var(--w-dim); } .ui2 .up-info .gold { color: var(--w-gold); }
.ui2 .up-bar { background: rgba(0,0,0,.5); height: 16px; } .ui2 .up-bar .fill { background: linear-gradient(90deg, var(--w-gold-lo), var(--w-gold)); }
.ui2 .up-bar span { color: #fff; text-shadow: 0 1px 0 #000; }
.ui2 .up-eff { color: var(--w-dim); font-size: 12px; }
.ui2 .confirm-box h3 { justify-content: center; margin: 8px 0 10px; } .ui2 .confirm-box h3::after { display: none; }
.ui2 .confirm-box .btn-grid button { height: 42px; text-align: center; justify-content: center; }
/* ===== v139: Günlük giriş ===== */
.ui2 .dly { display: flex; flex-direction: column; gap: 12px; }
.ui2 .dly-head { display: flex; align-items: center; gap: 12px; }
.ui2 .dly-head b { display: block; font: 700 15px 'Cinzel', serif; color: var(--w-text); }
.ui2 .dly-head small { color: var(--w-dim); font-size: 11.5px; }
.ui2 .dly-flame { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #ffd27a 0%, #c9852a 55%, #6b3e10 100%); box-shadow: 0 0 18px rgba(255,190,90,.45), inset 0 -3px 6px rgba(0,0,0,.35); }
.ui2 .dly-flame .ic { position: absolute; width: 46px; height: 46px; color: rgba(255,240,200,.25); }
.ui2 .dly-flame b { position: relative; font: 800 18px 'Manrope', sans-serif !important; color: #2a1600 !important; }
.ui2 .dly-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.ui2 .dly-day { position: relative; min-height: 86px; border-radius: 11px; padding: 6px 4px 7px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.3)); border: 1px solid rgba(230,191,90,.18); }
.ui2 .dly-day.big { grid-column: span 2; background: linear-gradient(160deg, rgba(230,191,90,.18), rgba(0,0,0,.35)); border-color: rgba(230,191,90,.45); }
.ui2 .dly-n { font: 700 10.5px 'Manrope', sans-serif; color: var(--w-dim); }
.ui2 .dly-rw { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; }
.ui2 .dly-it { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.ui2 .dly-it .ic { width: 22px; height: 22px; color: var(--w-gold); }
.ui2 .dly-it b { font: 800 11.5px 'Manrope', sans-serif; color: var(--w-text); margin-top: 2px; }
.ui2 .dly-it small { font-size: 9px !important; margin: 0 !important; color: var(--w-dim); }
.ui2 .dly-day.big .dly-it .ic { width: 26px; height: 26px; }
.ui2 .dly-day.done { opacity: .55; } .ui2 .dly-day.done .dly-rw { filter: saturate(.3); }
.ui2 .dly-ok { position: absolute; inset: 0; display: grid; place-items: center; }
.ui2 .dly-ok .ic { width: 30px; height: 30px; color: var(--w-up); background: rgba(10,30,20,.75); border-radius: 50%; padding: 5px; box-shadow: 0 0 0 2px rgba(111,224,164,.5); }
.ui2 .dly-day.just .dly-ok .ic { animation: dlyOk .5s var(--ease-out); }
@keyframes dlyOk { from { transform: scale(.2) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ui2 .dly-day.today { opacity: 1; border-color: var(--w-gold); box-shadow: 0 0 0 1px var(--w-gold), 0 0 18px rgba(230,191,90,.35); animation: dlyGlow 2.2s ease-in-out infinite; }
.ui2 .dly-day.today .dly-n { color: var(--w-gold-hi); }
@keyframes dlyGlow { 50% { box-shadow: 0 0 0 1px var(--w-gold), 0 0 26px rgba(230,191,90,.55); } }
.ui2 .modal-card button.dly-btn { height: 48px; font-size: 15px; justify-content: center; text-align: center; display: flex; align-items: center; gap: 8px; }
.ui2 .dly-btn .ic { width: 20px; height: 20px; }
.ui2 .dly-next { text-align: center; font-size: 12.5px; color: var(--w-dim); padding: 10px; border: 1px dashed rgba(230,191,90,.25); border-radius: 10px; }
.ui2 .dly-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 10px 0; border-radius: 11px; cursor: pointer;
  background: linear-gradient(90deg, rgba(230,191,90,.1), rgba(0,0,0,.25)); border: 1px solid rgba(230,191,90,.25); }
.ui2 .dly-card.ready { border-color: var(--w-gold); box-shadow: 0 0 14px rgba(230,191,90,.25); }
.ui2 .dly-card > div { flex: 1; min-width: 0; } .ui2 .dly-card b { font-size: 13px; } .ui2 .dly-card .ic-stat { color: var(--w-gold); } .ui2 .dly-card .chev { width: 14px; height: 14px; color: var(--w-dim); }
@media (prefers-reduced-motion: reduce) { .ui2 .dly-day.today, .ui2 .dly-day.just .dly-ok .ic { animation: none; } }
/* ===== v140: Sefer Yolu, Lütuf kartları, Bölge ustalığı ===== */
.ui2 .sf-hero { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-card); background: linear-gradient(120deg, rgba(230,191,90,.14), rgba(0,0,0,.3)); border: 1px solid var(--w-line); }
.ui2 .sf-badge { width: 58px; height: 58px; flex: none; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(45deg) scale(.82);
  background: linear-gradient(135deg, #e9c46a, #7b5518); box-shadow: 0 0 18px rgba(230,191,90,.35), inset 0 0 0 2px rgba(255,240,200,.35); }
.ui2 .sf-badge b, .ui2 .sf-badge small { transform: rotate(-45deg); } .ui2 .sf-badge b { font: 800 20px/1 'Manrope', sans-serif; color: #2a1800; } .ui2 .sf-badge small { font-size: 8px !important; margin: 0 !important; color: #3a2508 !important; font-weight: 800; }
.ui2 .sf-info b { display: block; font: 700 16px 'Cinzel', serif; color: var(--w-gold-hi); } .ui2 .sf-info small { color: var(--w-dim); } .ui2 .sf-info .gold { color: var(--w-gold); font-weight: 800; }
.ui2 .sefer-box { margin-top: 10px; border-radius: var(--r-card); }
.ui2 .boon-cur { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-card); background: rgba(0,0,0,.3); border: 1px solid var(--w-line2); }
.ui2 .boon-cur .ic-stat { color: var(--w-gold); } .ui2 .boon-cur b { font: 700 14px 'Cinzel', serif; color: var(--w-gold-hi); }
.ui2 .boon-cur .ok { color: var(--w-up); } .ui2 .boon-cur .bad { color: var(--w-dn); }
.ui2 .road { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 4px; }
.ui2 .road::before { content: ""; position: absolute; left: 17px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(180deg, var(--w-gold), rgba(230,191,90,.12)); }
.ui2 .road-st { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; color: var(--w-dim); }
.ui2 .road-st i { position: relative; z-index: 1; width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 800 11px 'Manrope', sans-serif; font-style: normal;
  background: #0d1424; border: 1px solid rgba(230,191,90,.3); color: var(--w-dim); }
.ui2 .road-st.done i { background: linear-gradient(180deg, #c99a3c, #7a5519); border-color: var(--w-gold-hi); color: #fff; } .ui2 .road-st.done i .ic { width: 14px; height: 14px; }
.ui2 .road-st.done span { color: var(--w-text); }
.ui2 .road-st.next i { border-color: var(--w-gold); color: var(--w-gold-hi); box-shadow: 0 0 12px rgba(230,191,90,.45); }
.ui2 .road-st.next span { color: var(--w-gold-hi); font-weight: 700; }
.ui2 .mst { display: flex; flex-direction: column; gap: 6px; }
.ui2 .mst-row { display: grid; grid-template-columns: 110px 1fr 48px; align-items: center; gap: 8px; font-size: 12px; }
.ui2 .mst-row i { display: flex; gap: 3px; } .ui2 .mst-row u { width: 9px; height: 9px; transform: rotate(45deg); background: rgba(255,255,255,.08); border: 1px solid rgba(230,191,90,.25); }
.ui2 .mst-row u.on { background: var(--w-gold); border-color: var(--w-gold-hi); box-shadow: 0 0 5px rgba(230,191,90,.6); }
.ui2 .mst-row b { text-align: right; color: var(--w-gold); font-size: 11.5px; }
.ui2 .boon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 4px; }
.ui2 .modal-card button.boon-card { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 10px 12px; min-height: 190px; text-align: center; border-radius: 14px;
  background: linear-gradient(180deg, #1f2a48, #10172a); border: 1px solid var(--w-line2); box-shadow: inset 0 1px 0 rgba(255,231,166,.1), 0 6px 18px rgba(0,0,0,.4); transition: transform .15s var(--ease-out), box-shadow .15s; }
.ui2 .modal-card button.boon-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--w-gold), 0 10px 24px rgba(0,0,0,.5); }
.ui2 .bc-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(230,191,90,.35), rgba(0,0,0,.3)); border: 1px solid var(--w-line2); }
.ui2 .bc-ic .ic { width: 24px; height: 24px; color: var(--w-gold-hi); }
.ui2 .boon-card b { font: 700 14px 'Cinzel', serif; color: var(--w-gold-hi); }
.ui2 .boon-card .bc-good, .ui2 .boon-card .bc-bad { display: flex; align-items: flex-start; gap: 5px; font-size: 11.5px; line-height: 1.35; text-align: left; width: 100%; }
.ui2 .boon-card .bc-good { color: var(--w-up); } .ui2 .boon-card .bc-bad { color: var(--w-dn); }
.ui2 .boon-card .bc-good .ic, .ui2 .boon-card .bc-bad .ic { width: 12px; height: 12px; flex: none; margin-top: 2px; }
.ui2 .boon-card em { margin-top: auto; font-style: normal; font: 800 12px 'Manrope', sans-serif; color: #2a1800; background: linear-gradient(180deg, #e9c46a, #a37a2a); padding: 5px 16px; border-radius: 999px; }
.buff.boon { border-color: rgba(230,191,90,.6) !important; background: linear-gradient(90deg, rgba(230,191,90,.25), rgba(10,14,26,.85)) !important; }
/* ===== v141: oyun temalı kaydırma çubuğu, nadirlik seçici, takılı eşya şeridi ===== */
.ui2 *::-webkit-scrollbar { width: 8px; height: 8px; }
.ui2 *::-webkit-scrollbar-track { background: rgba(0,0,0,.25); border-radius: 4px; }
.ui2 *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #c99a3c, #6b4c18); border-radius: 4px; border: 2px solid rgba(10,14,26,.9); }
.ui2 *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f0cf7a, #8a6424); }
.ui2 *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.ui2 *::-webkit-scrollbar-corner { background: transparent; }
@supports (-moz-appearance: none) { .ui2 * { scrollbar-width: thin; scrollbar-color: #a37a2a rgba(0,0,0,.3); } }
/* Yem seçici: her tuş kendi nadirlik renginde */
.ui2 .up-rar { gap: 8px; flex-wrap: wrap; }
.ui2 .modal-card .up-rar button { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 6px; border-radius: 10px; width: auto;
  background: radial-gradient(circle at 30% 40%, var(--ri) 0%, var(--rm) 55%, var(--rc) 100%); border: 2px solid var(--rd); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 2px 0 rgba(0,0,0,.4); }
.ui2 .up-rar button img.itm { width: 26px; height: 26px; }
.ui2 .up-rar button span { font: 800 11.5px 'Manrope', sans-serif; color: #1a1f2b; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.ui2 .modal-card .up-rar button.on { box-shadow: 0 0 0 2px var(--w-gold-hi), 0 0 14px rgba(230,191,90,.6); }
/* Takılı eşya: ayrı şerit, altın çerçeve */
.ui2 .worn-strip { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(230,191,90,.18), rgba(0,0,0,.25) 70%); border: 1px solid var(--w-gold); box-shadow: 0 0 16px rgba(230,191,90,.18), inset 0 1px 0 rgba(255,231,166,.12); }
.ui2 .worn-strip .itile { width: 66px; flex: none; }
.ui2 .panel-col button.itile.worn { box-shadow: 0 0 0 2px var(--w-gold-hi), 0 0 14px rgba(230,191,90,.55), 0 3px 0 rgba(0,0,0,.4); }
.ui2 .ws-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui2 .ws-info span { align-self: flex-start; font: 800 10px 'Manrope', sans-serif; letter-spacing: .03em; color: #2a1800; background: linear-gradient(180deg, #f0cf7a, #b98a2e); padding: 2px 8px; border-radius: 999px; }
.ui2 .ws-info b { font: 700 14px 'Cinzel', serif; filter: brightness(1.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui2 .ws-info small { color: var(--w-dim); font-size: 11.5px; margin: 0; }
.ui2 .itile span { display: none; }
/* ===== v142: Bonuslar (Elmas + reklam), Elmas paketleri, test reklamı ===== */
.ui2 .bcenter { display: flex; flex-direction: column; gap: 8px; }
.ui2 .bc-top { display: flex; align-items: center; gap: 10px; padding: 4px 2px 6px; } .ui2 .bc-top .ic-stat { color: var(--w-gold); } .ui2 .bc-top b { font: 700 14px 'Cinzel', serif; }
.ui2 .bc-card { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-card); background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(0,0,0,.25)); border: 1px solid rgba(230,191,90,.18); }
.ui2 .bc-card.on { border-color: rgba(111,224,164,.55); box-shadow: 0 0 12px rgba(111,224,164,.15); }
.ui2 .bc-card.ad { background: linear-gradient(110deg, rgba(230,191,90,.18), rgba(0,0,0,.25)); border-color: var(--w-line2); }
.ui2 .bc-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(230,191,90,.3), rgba(0,0,0,.35)); border: 1px solid var(--w-line); }
.ui2 .bc-ic .ic { width: 22px; height: 22px; color: var(--w-gold-hi); }
.ui2 .bc-main { min-width: 0; } .ui2 .bc-main b { display: block; font-size: 13.5px; } .ui2 .bc-main small { margin: 1px 0 0 !important; }
.ui2 .bc-main em { display: inline-block; margin-top: 4px; font-style: normal; font: 800 10.5px 'Manrope', sans-serif; color: #062; background: var(--w-up); padding: 1px 7px; border-radius: 999px; }
.ui2 .bc-btns { display: flex; flex-direction: column; gap: 6px; }
.ui2 .bc-card button { min-width: 108px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 10px; text-align: center; }
.ui2 .bc-card button .ic { width: 13px; height: 13px; vertical-align: -2px; }
@media (max-width: 700px) { .ui2 .bc-card { grid-template-columns: 40px 1fr; } .ui2 .bc-card > button, .ui2 .bc-btns { grid-column: 1 / -1; } .ui2 .bc-btns { flex-direction: row; } .ui2 .bc-btns button, .ui2 .bc-card > button { flex: 1; } }
.ui2 .pk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ui2 .panel-col button.pk-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 10px 12px; border-radius: 14px; text-align: center;
  background: radial-gradient(ellipse at 50% 20%, rgba(143,216,255,.22), rgba(10,16,32,.95) 70%); border: 1px solid rgba(143,216,255,.35); }
.ui2 .pk-card.t2, .ui2 .pk-card.t3 { border-color: var(--w-gold); background: radial-gradient(ellipse at 50% 20%, rgba(230,191,90,.25), rgba(10,16,32,.95) 70%) !important; }
.ui2 .pk-gem .ic { width: 40px; height: 40px; color: #8fd8ff; filter: drop-shadow(0 0 8px rgba(143,216,255,.6)); } .ui2 .pk-card.t2 .pk-gem .ic, .ui2 .pk-card.t3 .pk-gem .ic { color: var(--w-gold-hi); filter: drop-shadow(0 0 8px rgba(230,191,90,.6)); }
.ui2 .pk-card b { font: 800 22px 'Manrope', sans-serif; color: #fff; } .ui2 .pk-card small { margin: 0 !important; }
.ui2 .pk-card i { position: absolute; top: 8px; right: 8px; font-style: normal; font: 800 10px 'Manrope', sans-serif; color: #062; background: var(--w-up); padding: 2px 7px; border-radius: 999px; }
.ui2 .pk-card em { margin-top: 8px; font-style: normal; font: 800 13px 'Manrope', sans-serif; color: #2a1800; background: linear-gradient(180deg, #f0cf7a, #b98a2e); padding: 6px 14px; border-radius: 999px; }
#adfake { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: rgba(0,0,0,.88); }
#adfake .adf-box { text-align: center; color: #ece5d3; display: flex; flex-direction: column; gap: 8px; align-items: center; }
#adfake b { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; font: 800 38px 'Manrope', sans-serif; border: 3px solid #e6bf5a; color: #ffe7a6; }
#adfake small { font: 700 13px 'Cinzel', serif; color: #e6bf5a; } #adfake span { font-size: 12px; color: #98a0b3; }
.buff.add { border-color: rgba(230,191,90,.55) !important; }
#buffs .buff.add .bname { display: inline !important; color: var(--gold); }
#buffs .buff.add { padding: 4px 8px 4px 5px !important; }
/* ===== v143: Echoes of Stones logosu ===== */
.sp-logo { font-size: clamp(30px, 7vw, 58px); letter-spacing: .08em; margin-left: 0; text-align: center; line-height: 1.05; padding: 0 16px; }
.sp-logo i, .auth-logo i { font-style: normal; font-size: .55em; letter-spacing: .1em; opacity: .8; vertical-align: .2em; margin: 0 .1em; }
.auth-logo { font-size: clamp(26px, 6vw, 34px); letter-spacing: .06em; }