#tracker, #edge, #w-compass, #c-north, #t-compass, #b-debug { pointer-events: auto; cursor: pointer; }
#dock button { position: relative; }
#dock-badge {
  position: absolute;
  top: 5px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f0c850;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.65);
}

/* ---------- Görev takibi ---------- */
#tracker { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; }
.tr-text { min-width: 0; }
.tr-title, .tr-obj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-obj em { font-style: normal; }
.tr-bar { display: none; grid-column: 1 / -1; }
.tr-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); transition: width 0.4s; }

#edge { width: 0; height: 0; z-index: 3; }
.edge-arrow {
  position: absolute;
  left: -15px;
  top: -15px;
  width: 30px;
  height: 30px;
  background: var(--quest, #f0c850);
  clip-path: polygon(100% 50%, 15% 8%, 32% 50%, 15% 92%);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}
.edge-dist {
  position: absolute;
  left: 0;
  top: 16px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}

/* ---------- Görev ve hazine işaretleri ---------- */
.qm-wrap { cursor: pointer; padding: 6px 6px 10px; }
.qm {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.qm b { position: relative; z-index: 1; line-height: 1; }
.qm::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--qm-stem, #1b1b1b);
}
.qm-wrap.tracked .qm::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--quest, #f0c850);
  opacity: 0.85;
}

.loot { cursor: pointer; opacity: 0.9; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.loot svg { display: block; }
.loot-rare { filter: drop-shadow(0 0 3px rgba(120, 200, 255, 0.8)); }
.loot-legendary { filter: drop-shadow(0 0 4px rgba(255, 200, 60, 0.9)); }
.loot.taken { animation: take 0.6s ease-out forwards; pointer-events: none; }
@keyframes take { 0% { transform: scale(1); opacity: 1; } 100% { transform: translateY(-34px) scale(1.7); opacity: 0; } }

.player.warp svg { animation: warp 0.5s ease-out; }
@keyframes warp { 0% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Bildirimler ---------- */
#banner {
  position: fixed;
  z-index: 6;
  left: 0;
  right: 0;
  top: 30%;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
#banner.show { animation: bannerIn 3.2s ease forwards; }
@keyframes bannerIn {
  0% { opacity: 0; transform: scale(1.25); }
  10% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.98); }
}
.bn-title { display: inline-block; }
.bn-sub, .bn-reward { margin-top: 6px; }

#achv-stack {
  position: fixed;
  z-index: 6;
  top: calc(12px + var(--st));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.achv { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; min-width: 240px; animation: achvIn 0.45s ease; }
.achv.out { animation: achvOut 0.5s ease forwards; }
.av-icon { color: var(--accent); display: grid; place-items: center; }
@keyframes achvIn { from { transform: translateY(-30px); opacity: 0; } }
@keyframes achvOut { to { transform: translateY(-30px); opacity: 0; } }

#xp-pops { pointer-events: none; }
.xp-pop { position: absolute; left: 0; bottom: 0; white-space: nowrap; animation: xpUp 1.5s ease-out forwards; }
@keyframes xpUp { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px); } }

/* ---------- Bilgi kartı ---------- */
.pc-text { white-space: pre-line; font-size: 14px; line-height: 1.4; margin: -6px 0 12px; opacity: 0.85; }
.pc-actions button { background: transparent; color: var(--panel-fg); border: var(--btn-border); }
.pc-actions button.primary { background: var(--btn-bg); color: var(--btn-fg); }

/* ---------- Menü ---------- */
#menu {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  padding-top: var(--st);
  background: var(--m-bg);
  color: var(--m-fg);
  font-family: var(--m-font);
  user-select: text;
  animation: menuIn 0.25s ease;
}
@keyframes menuIn { from { opacity: 0; transform: scale(1.03); } }
#menu-head { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 14px 16px 4px; }
#menu-title { font-family: var(--m-title-font); font-size: 30px; line-height: 1.1; }
#menu-profile { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; margin-top: 4px; opacity: 0.9; }
#menu-close { grid-row: 1 / span 2; grid-column: 2; width: 46px; height: 46px; font-size: 20px; background: none; border: 0; color: inherit; cursor: pointer; }
#menu-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px 8px; scrollbar-width: none; flex: none; }
#menu-tabs::-webkit-scrollbar { display: none; }
#menu-tabs button { flex: none; padding: 9px 14px; border: 0; cursor: pointer; font: inherit; font-size: 15px; background: var(--m-tab); color: inherit; }
#menu-tabs button.active { background: var(--m-tab-on); color: var(--m-tab-on-fg); }
#menu-body { flex: 1; overflow-y: auto; padding: 4px 16px calc(28px + var(--sb)); -webkit-overflow-scrolling: touch; }
#menu-body section { max-width: 640px; margin: 0 auto; }
#menu-body h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 18px 0 10px; font-family: var(--m-title-font); font-size: 19px; font-weight: normal; }
#menu-body h3 small { font-family: var(--m-font); font-size: 12px; opacity: 0.7; }
#menu-body button { font: inherit; cursor: pointer; }

.qc { padding: 12px 14px; margin-bottom: 10px; background: var(--m-card); border: var(--m-card-border); }
.qc.tracked { box-shadow: inset 4px 0 0 var(--quest); }
.qc.done { opacity: 0.55; }
.qc-top { display: flex; justify-content: space-between; font-size: 12px; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.06em; }
.qc h4 { margin: 4px 0 4px; font-family: var(--m-title-font); font-size: 18px; font-weight: normal; }
.qc p { margin: 0 0 10px; font-size: 14px; line-height: 1.4; opacity: 0.9; }
.qc-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.qc-reward { font-size: 13px; color: var(--reward); }
.qc button { padding: 8px 14px; border: var(--m-btn-border); background: var(--m-btn); color: var(--m-btn-fg); flex: none; }
.qc button.on { background: transparent; color: inherit; opacity: 0.8; }
.qc-done { font-size: 13px; opacity: 0.8; }
.qc-bar { height: 7px; background: var(--bar-bg); margin: 2px 0 10px; overflow: hidden; }
.qc-bar i { display: block; height: 100%; background: var(--quest); }
.m-empty, .m-hint { font-size: 14px; line-height: 1.45; opacity: 0.75; }
.m-wide { width: 100%; padding: 12px; margin-top: 4px; border: var(--m-btn-border); background: var(--m-tab); color: inherit; }
.m-wide.danger { color: #e05555; }

.bag-head { text-align: center; padding: 16px 0 4px; }
.bag-coins { font-family: var(--m-title-font); font-size: 38px; color: var(--reward); }
.bag-level { margin: 4px 0 10px; font-size: 15px; }
.bag-head small { opacity: 0.7; }
.bag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bag-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px; text-align: center; background: var(--m-card); border: var(--m-card-border); }
.bag-item b { font-size: 13px; font-weight: normal; line-height: 1.2; }
.bag-item small { font-size: 11px; opacity: 0.7; }
.bag-count { font-family: var(--m-title-font); font-size: 22px; }
.bag-icon { height: 44px; display: grid; place-items: center; }

.ach { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 8px; background: var(--m-card); border: var(--m-card-border); opacity: 0.5; }
.ach.got { opacity: 1; }
.ach-icon { color: var(--quest); display: grid; place-items: center; }
.ach:not(.got) .ach-icon { filter: grayscale(1); opacity: 0.6; }
.ach b { display: block; font-weight: normal; font-family: var(--m-title-font); }
.ach small { opacity: 0.75; font-size: 12px; }
.ach-prog { font-size: 13px; white-space: nowrap; }

.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st { padding: 12px; background: var(--m-card); border: var(--m-card-border); }
.st small { display: block; font-size: 12px; opacity: 0.7; }
.st b { font-family: var(--m-title-font); font-size: 23px; font-weight: normal; }

.set { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.set small { display: block; font-size: 12px; opacity: 0.7; margin-top: 2px; }
.set input { display: none; }
.set > i { flex: none; position: relative; width: 46px; height: 26px; border-radius: 13px; background: var(--toggle-off); transition: background 0.2s; }
.set > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.set input:checked + i { background: var(--quest); }
.set input:checked + i::after { transform: translateX(20px); }
.seg { display: flex; flex: none; }
.seg button { padding: 7px 11px; border: var(--m-btn-border); background: var(--m-tab); color: inherit; }
.seg button.on { background: var(--m-tab-on); color: var(--m-tab-on-fg); }
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- Giriş ---------- */
#intro { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.6); }
.intro-card {
  width: min(100%, 460px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 20px 18px;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: var(--panel-border);
  font-family: var(--panel-font);
  box-shadow: var(--panel-shadow, 0 10px 40px rgba(0, 0, 0, 0.6));
}
.intro-card h2 { margin: 0 0 6px; font-family: var(--m-title-font); font-size: 26px; font-weight: normal; }
.intro-card p { margin: 0 0 14px; line-height: 1.45; opacity: 0.85; }
.intro-card .theme-grid { margin-bottom: 14px; }
.intro-list { list-style: none; margin: 8px 0 18px; padding: 0; }
.intro-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; line-height: 1.35; }
.intro-list li b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--quest); color: #111; font-size: 17px; }
.intro-step > button { display: block; width: 100%; padding: 13px; margin-top: 8px; font: inherit; font-size: 16px; cursor: pointer; border: var(--btn-border); background: transparent; color: var(--panel-fg); }
.intro-step > button.primary { background: var(--btn-bg); color: var(--btn-fg); }

/* ================= Vahşi Batı ================= */
[data-theme="west"] {
  --quest: #c9962a;
  --reward: #8a1c14;
  --m-bg: var(--paper, none) center / 256px, radial-gradient(ellipse at center, #eadcb6 40%, #cdb683 100%);
  --m-fg: #2b1d10;
  --m-font: WestBook, serif;
  --m-title-font: WestTitle, serif;
  --m-tab: transparent;
  --m-tab-on: #1f160d;
  --m-tab-on-fg: #efe3c4;
  --m-card: rgba(255, 248, 228, 0.35);
  --m-card-border: 1.5px solid rgba(43, 29, 16, 0.55);
  --m-btn: #1f160d;
  --m-btn-fg: #efe3c4;
  --m-btn-border: 0;
  --bar-bg: rgba(43, 29, 16, 0.18);
  --toggle-off: rgba(43, 29, 16, 0.3);
}
[data-theme="west"] #menu { background-blend-mode: multiply; box-shadow: inset 0 0 90px rgba(70, 40, 10, 0.5); }
[data-theme="west"] #menu-tabs button { font-family: WestStrong; text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; }
[data-theme="west"] #menu-tabs button.active { clip-path: polygon(2% 10%, 30% 0, 70% 8%, 98% 0, 100% 90%, 60% 100%, 20% 94%, 0 100%); }
[data-theme="west"] .qc h4, [data-theme="west"] #menu-body h3 { letter-spacing: 0.06em; }
[data-theme="west"] #tracker {
  left: 50%;
  bottom: calc(90px + var(--sb));
  transform: translateX(-50%);
  width: min(88vw, 380px);
  padding: 7px 16px;
  background: #1f160d;
  color: #efe3c4;
  clip-path: polygon(0 10%, 5% 0, 50% 6%, 95% 0, 100% 14%, 98% 88%, 93% 100%, 50% 94%, 6% 100%, 1% 82%);
}
[data-theme="west"] .tr-title { font-family: WestStrong; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: #e0a07a; }
[data-theme="west"] .tr-obj { font-family: WestScript; font-size: 17px; }
[data-theme="west"] .tr-obj em { color: #f3d27a; }
[data-theme="west"] .tr-dist { font-family: WestTitle; font-size: 15px; }
[data-theme="west"] #edge { --quest: #a3171b; }
[data-theme="west"] .edge-dist { font-family: WestTitle; }
[data-theme="west"] #w-compass { bottom: calc(160px + var(--sb)); left: 20px; width: 76px; height: 76px; }
[data-theme="west"] #w-rose { position: absolute; inset: 0; }
.w-ring { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); transform: rotate(-90deg); overflow: visible; }
.ring-track { fill: none; stroke: rgba(43, 29, 16, 0.4); stroke-width: 4; }
.ring-fill { fill: none; stroke: #c9962a; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 295.3; stroke-dashoffset: 295.3; transition: stroke-dashoffset 0.6s; filter: drop-shadow(0 0 2px rgba(255, 220, 120, 0.8)); }
#w-lvl {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  min-width: 26px;
  padding: 1px 8px;
  text-align: center;
  background: #1f160d;
  color: #f3d27a;
  font: 14px WestTitle;
  border-radius: 10px;
}
#w-coins {
  right: 16px;
  bottom: calc(186px + var(--sb));
  font-family: WestTitle;
  font-size: 22px;
  color: #2b1d10;
  text-shadow: 0 0 5px #e8dbb8, 0 0 2px #e8dbb8;
}
[data-theme="west"] #w-coords { bottom: calc(160px + var(--sb)); }
[data-theme="west"] .qm { --qm-stem: #2a1c10; border-radius: 50%; border: 3px solid #2a1c10; font: 20px WestTitle; }
[data-theme="west"] .qm-main { background: #e8b923; color: #2a1c10; }
[data-theme="west"] .qm-side { background: #f4ecd8; color: #2a1c10; }
[data-theme="west"] .bn-title { padding: 10px 28px; background: #1f160d; color: #efe3c4; font: 30px WestTitle; letter-spacing: 0.1em; text-transform: uppercase; clip-path: polygon(0 12%, 4% 0, 50% 8%, 96% 0, 100% 16%, 98% 86%, 94% 100%, 50% 92%, 5% 100%, 1% 80%); }
[data-theme="west"] .bn-sub { font: 22px WestScript; color: #2b1d10; text-shadow: 0 0 6px #efe3c4, 0 0 3px #efe3c4; }
[data-theme="west"] .bn-reward { font: 17px WestStrong; color: #8a1c14; text-shadow: 0 0 5px #efe3c4; letter-spacing: 0.06em; }
[data-theme="west"] .achv { background: #e8dbb8; border: 2px solid #2b1d10; color: #2b1d10; box-shadow: 0 4px 14px rgba(40, 20, 0, 0.5); }
[data-theme="west"] .av-head { font: 12px WestStrong; text-transform: uppercase; letter-spacing: 0.14em; color: #8a1c14; }
[data-theme="west"] .av-name { font: 17px WestTitle; }
[data-theme="west"] #xp-pops { left: 24px; bottom: calc(260px + var(--sb)); }
[data-theme="west"] .xp-pop { font: 19px WestTitle; color: #8a1c14; text-shadow: 0 0 5px #efe3c4, 0 0 2px #efe3c4; }
[data-theme="west"] .intro-list li b { background: #e8b923; font-family: WestTitle; }

/* ================= Şehir ================= */
[data-theme="city"] {
  --quest: #f0c850;
  --reward: #79c66f;
  --m-bg: linear-gradient(160deg, rgba(20, 24, 30, 0.97), rgba(6, 8, 10, 0.97));
  --m-fg: #f2f2f2;
  --m-font: CityB, sans-serif;
  --m-title-font: CityA, sans-serif;
  --m-tab: rgba(255, 255, 255, 0.08);
  --m-tab-on: #f2f2f2;
  --m-tab-on-fg: #000;
  --m-card: rgba(255, 255, 255, 0.06);
  --m-card-border: 0;
  --m-btn: #f2f2f2;
  --m-btn-fg: #000;
  --m-btn-border: 0;
  --bar-bg: rgba(255, 255, 255, 0.12);
  --toggle-off: rgba(255, 255, 255, 0.2);
}
[data-theme="city"] #menu-head { border-bottom: 3px solid #c45cf2; padding-bottom: 10px; }
[data-theme="city"] #menu-title { font-size: 34px; letter-spacing: 0.04em; }
[data-theme="city"] .mp-coins { color: #79c66f; }
[data-theme="city"] #menu-tabs button { text-transform: uppercase; font-family: CityA; letter-spacing: 0.05em; }
[data-theme="city"] .qc h4 { text-transform: uppercase; }
[data-theme="city"] #tracker {
  left: 50%;
  bottom: calc(92px + var(--sb));
  transform: translateX(-50%);
  width: min(92vw, 420px);
  grid-template-columns: 1fr;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
[data-theme="city"] .tr-title { font: 14px CityA; text-transform: uppercase; color: #d79af5; letter-spacing: 0.06em; }
[data-theme="city"] .tr-obj { font: 21px CityB; }
[data-theme="city"] .tr-obj em { color: #f0c850; }
[data-theme="city"] .tr-dist { font: 15px CityA; opacity: 0.85; }
[data-theme="city"] .edge-dist { font-family: CityA; font-size: 14px; }
[data-theme="city"] #c-radar { bottom: calc(160px + var(--sb)); width: 172px; }
[data-theme="city"] #c-place { bottom: calc(160px + var(--sb)); }
.c-toprow { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.c-toprow #c-north { margin: 0; }
#c-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2f6fd6;
  border: 2px solid #fff;
  color: #fff;
  font: 14px CityA;
  box-shadow: 0 0 0 1.5px #000;
}
#c-rankname { font: 15px CityA; color: #fff; text-transform: uppercase; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; white-space: nowrap; }
.c-xpbar { margin-top: 3px; height: 5px; background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6); }
#c-xp i { background: #f0c850; }
#c-money { font: 27px CityA; color: #79c66f; margin-top: 2px; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
[data-theme="city"] #c-speed { font-size: 18px; color: #fff; }
[data-theme="city"] .qm { --qm-stem: #000; border-radius: 50%; border: 2.5px solid #000; font: 20px CityA; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6); }
[data-theme="city"] .qm-main { background: #f0c850; color: #000; }
[data-theme="city"] .qm-side { background: #5cb8ff; color: #fff; text-shadow: 1px 1px 0 #000; }
[data-theme="city"] #banner { padding: 16px 0 14px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.78) 18%, rgba(0, 0, 0, 0.78) 82%, transparent); }
[data-theme="city"] .bn-title { font: 42px CityA; color: #f0c850; letter-spacing: 0.02em; text-shadow: 2px 2px 0 #000; }
[data-theme="city"] .bn-sub { font: 19px CityB; color: #fff; text-transform: uppercase; }
[data-theme="city"] .bn-reward { font: 20px CityA; color: #79c66f; }
[data-theme="city"] .achv { background: rgba(0, 0, 0, 0.85); border-left: 5px solid #f0c850; color: #fff; }
[data-theme="city"] .av-head { font: 13px CityA; text-transform: uppercase; color: #f0c850; letter-spacing: 0.06em; }
[data-theme="city"] .av-name { font: 18px CityB; }
[data-theme="city"] #xp-pops { left: 24px; bottom: calc(262px + var(--sb)); }
[data-theme="city"] .xp-pop { font: 21px CityA; color: #f0c850; text-shadow: 2px 2px 0 #000; }
[data-theme="city"] .intro-card h2 { text-transform: uppercase; }

/* ================= Blok ================= */
[data-theme="block"] {
  --quest: #f5d442;
  --reward: #7ee03a;
  --m-bg: rgba(16, 16, 16, 0.72);
  --m-fg: #3f3f3f;
  --m-font: BlockB, monospace;
  --m-title-font: BlockA, monospace;
  --m-tab: #8b8b8b;
  --m-tab-on: #c6c6c6;
  --m-tab-on-fg: #3f3f3f;
  --m-card: #8b8b8b;
  --m-card-border: 3px solid;
  --m-btn: #6f6f6f;
  --m-btn-fg: #fff;
  --m-btn-border: 2px solid #000;
  --bar-bg: #3a3a3a;
  --toggle-off: #555;
}
[data-theme="block"] #menu-head, [data-theme="block"] #menu-tabs { color: #fff; text-shadow: 2px 2px 0 #3f3f3f; }
[data-theme="block"] #menu-tabs button { border: 3px solid; border-color: #fff #555 #555 #fff; color: #3f3f3f; text-shadow: none; }
[data-theme="block"] #menu-tabs button.active { border-bottom-color: #c6c6c6; transform: translateY(3px); }
[data-theme="block"] #menu-body section {
  padding: 4px 12px 14px;
  margin-bottom: 12px;
  background: #c6c6c6;
  border: 3px solid;
  border-color: #fff #555 #555 #fff;
  box-shadow: 0 0 0 2px #000;
}
[data-theme="block"] .qc, [data-theme="block"] .bag-item, [data-theme="block"] .ach, [data-theme="block"] .st { border-color: #373737 #fff #fff #373737; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; }
[data-theme="block"] .qc button, [data-theme="block"] .m-wide, [data-theme="block"] .seg button { box-shadow: inset 2px 2px 0 #a8a8a8, inset -2px -3px 0 #4a4a4a; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; }
[data-theme="block"] .qc-reward { color: #b6ff6b; }
[data-theme="block"] .bag-coins { color: #3fd17a; text-shadow: 3px 3px 0 #1b4a2b; }
[data-theme="block"] #tracker {
  left: 50%;
  top: calc(8px + var(--st));
  transform: translateX(-50%);
  width: min(66vw, 300px);
  grid-template-columns: 1fr auto;
  row-gap: 3px;
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
  font-family: BlockB;
}
[data-theme="block"] .tr-title { font-size: 15px; text-align: center; grid-column: 1 / -1; }
[data-theme="block"] .tr-bar { display: block; order: 2; height: 10px; background: #3b123b; border: 2px solid #000; }
[data-theme="block"] .tr-bar i { background: linear-gradient(#ff8dff, #e844e8 50%, #b51fb5); }
[data-theme="block"] .tr-text { display: contents; }
[data-theme="block"] .tr-obj { order: 3; font-size: 13px; color: #e0e0e0; }
[data-theme="block"] .tr-obj em { color: #ffff55; }
[data-theme="block"] .tr-dist { order: 4; font-size: 13px; }
[data-theme="block"] #b-debug { top: calc(64px + var(--st)); }
[data-theme="block"] #route-info { top: calc(64px + var(--st)); }
[data-theme="block"] .edge-arrow { clip-path: polygon(100% 50%, 25% 10%, 25% 35%, 0 35%, 0 65%, 25% 65%, 25% 90%); }
[data-theme="block"] .edge-dist { font-family: BlockB; font-size: 14px; text-shadow: 2px 2px 0 #3f3f3f; }
#b-xp { left: 50%; bottom: calc(94px + var(--sb)); transform: translateX(-50%); width: 300px; }
.b-track { height: 9px; background: #1d1d1d; border: 2px solid #000; }
.b-track i { display: block; height: 100%; width: 0; background: linear-gradient(#b6ff6b, #7ee03a 50%, #4fa81d); transition: width 0.5s; }
#b-lvl { position: absolute; left: 50%; top: -17px; transform: translateX(-50%); font: 17px BlockA; color: #7ee03a; text-shadow: 2px 2px 0 #1b3b0b, -1px -1px 0 #1b3b0b; }
[data-theme="block"] #b-hearts { bottom: calc(126px + var(--sb)); left: calc(50% - 150px); transform: none; }
[data-theme="block"] #b-itemname { bottom: calc(152px + var(--sb)); }
[data-theme="block"] .qm { --qm-stem: #1b1b1b; border: 3px solid #1b1b1b; box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.45), inset -3px -3px 0 rgba(0, 0, 0, 0.3); font: 20px BlockA; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; }
[data-theme="block"] .qm-main { background: #f5d442; }
[data-theme="block"] .qm-side { background: #3fd17a; }
[data-theme="block"] .qm-wrap.tracked .qm::before { border-radius: 0; }
[data-theme="block"] .bn-title { font: 36px BlockA; color: #fff; text-shadow: 4px 4px 0 #3f3f3f; }
[data-theme="block"] .bn-sub { font: 19px BlockB; color: #ffff55; text-shadow: 2px 2px 0 #3f3f3f; }
[data-theme="block"] .bn-reward { font: 17px BlockB; color: #7ee03a; text-shadow: 2px 2px 0 #1b3b0b; }
[data-theme="block"] #achv-stack { left: auto; right: 8px; transform: none; }
[data-theme="block"] .achv { background: #212121; border: 2px solid #000; box-shadow: inset 0 0 0 2px #555; border-radius: 4px; min-width: 220px; }
[data-theme="block"] .av-icon { color: #f5d442; }
[data-theme="block"] .av-head { font: 14px BlockB; color: #ffff55; }
[data-theme="block"] .av-name { font: 15px BlockB; color: #fff; }
[data-theme="block"] #xp-pops { left: 50%; bottom: calc(150px + var(--sb)); }
[data-theme="block"] .xp-pop { font: 18px BlockA; color: #7ee03a; text-shadow: 2px 2px 0 #1b3b0b; transform: translateX(-50%); }
[data-theme="block"] .intro-card { border-color: #fff #555 #555 #fff; }
[data-theme="block"] .intro-list li b { border-radius: 0; border: 2px solid #1b1b1b; font-family: BlockA; }

/* ================= Taktik ================= */
[data-theme="tac"] {
  --quest: #f2b33d;
  --reward: #d6f25c;
  --m-bg: repeating-linear-gradient(0deg, rgba(150, 200, 110, 0.05) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(150, 200, 110, 0.05) 0 1px, transparent 1px 32px), rgba(6, 9, 5, 0.97);
  --m-fg: #c4d6ad;
  --m-font: TacB, sans-serif;
  --m-title-font: TacA, sans-serif;
  --m-tab: transparent;
  --m-tab-on: rgba(214, 242, 92, 0.14);
  --m-tab-on-fg: #d6f25c;
  --m-card: rgba(160, 200, 110, 0.05);
  --m-card-border: 1px solid rgba(160, 200, 110, 0.28);
  --m-btn: transparent;
  --m-btn-fg: #d6f25c;
  --m-btn-border: 1px solid #d6f25c;
  --bar-bg: rgba(160, 200, 110, 0.15);
  --toggle-off: rgba(160, 200, 110, 0.25);
}
[data-theme="tac"] #menu-title { text-transform: uppercase; letter-spacing: 0.22em; color: #d6f25c; font-size: 26px; }
[data-theme="tac"] #menu-profile, [data-theme="tac"] #menu-tabs button, [data-theme="tac"] .qc h4, [data-theme="tac"] #menu-body h3 { text-transform: uppercase; letter-spacing: 0.12em; }
[data-theme="tac"] #menu-tabs button { font-family: TacA; font-size: 13px; border-bottom: 2px solid transparent; }
[data-theme="tac"] #menu-tabs button.active { border-bottom-color: #d6f25c; }
[data-theme="tac"] .qc button { text-transform: uppercase; letter-spacing: 0.1em; font-family: TacA; font-size: 12px; }
[data-theme="tac"] #tracker {
  top: calc(162px + var(--st));
  left: 14px;
  max-width: 64vw;
  padding: 5px 10px;
  border-left: 3px solid #f2b33d;
  background: rgba(8, 11, 7, 0.72);
  text-transform: uppercase;
}
[data-theme="tac"] .tr-title { font: 12px TacA; color: #f2b33d; letter-spacing: 0.14em; }
[data-theme="tac"] .tr-obj { font: 13px TacB; color: #c4d6ad; letter-spacing: 0.06em; }
[data-theme="tac"] .tr-obj em { color: #f2b33d; }
[data-theme="tac"] .tr-dist { font: 13px TacA; color: #f2b33d; }
[data-theme="tac"] .edge-arrow { clip-path: polygon(100% 50%, 0 0, 30% 50%, 0 100%); }
[data-theme="tac"] .edge-dist { font: 12px TacA; color: #f2b33d; letter-spacing: 0.1em; }
[data-theme="tac"] #t-coords { bottom: calc(112px + var(--sb)); }
#t-xp {
  left: 50%;
  bottom: calc(84px + var(--sb));
  transform: translateX(-50%);
  width: min(86vw, 350px);
  display: flex;
  align-items: center;
  gap: 8px;
  font: 11px TacA;
  color: #c4d6ad;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-shadow: 0 0 6px #000;
}
.t-track { flex: 1; height: 4px; background: rgba(160, 200, 110, 0.22); }
.t-track i { display: block; height: 100%; width: 0; background: #d6f25c; box-shadow: 0 0 6px #d6f25c; transition: width 0.5s; }
#t-lvl { color: #d6f25c; }
[data-theme="tac"] .qm { --qm-stem: transparent; width: 30px; height: 30px; transform-origin: center; }
[data-theme="tac"] .qm, [data-theme="tac"] .qm-wrap.tracked .qm { background: rgba(8, 11, 7, 0.82); border: 2px solid; transform: rotate(45deg); animation: none; }
[data-theme="tac"] .qm b { transform: rotate(-45deg); font: 15px TacA; }
[data-theme="tac"] .qm-main { border-color: #f2b33d; color: #f2b33d; box-shadow: 0 0 10px rgba(242, 179, 61, 0.5); }
[data-theme="tac"] .qm-side { border-color: #d6f25c; color: #d6f25c; }
[data-theme="tac"] .qm-wrap.tracked .qm::before { border-radius: 0; inset: -7px; }
[data-theme="tac"] .bn-title { padding: 8px 24px; font: 22px TacA; color: #d6f25c; letter-spacing: 0.24em; text-transform: uppercase; background: rgba(8, 11, 7, 0.88); border-top: 1px solid #d6f25c; border-bottom: 1px solid #d6f25c; }
[data-theme="tac"] .bn-sub { font: 14px TacB; color: #c4d6ad; text-transform: uppercase; letter-spacing: 0.16em; text-shadow: 0 0 6px #000; }
[data-theme="tac"] .bn-reward { font: 26px TacA; color: #f2b33d; text-shadow: 0 0 8px rgba(0, 0, 0, 0.9); }
[data-theme="tac"] .achv { background: rgba(8, 11, 7, 0.92); border: 1px solid #d6f25c; color: #c4d6ad; text-transform: uppercase; }
[data-theme="tac"] .av-head { font: 11px TacA; color: #d6f25c; letter-spacing: 0.2em; }
[data-theme="tac"] .av-name { font: 15px TacA; letter-spacing: 0.08em; }
[data-theme="tac"] #xp-pops { right: 22px; top: 46%; }
[data-theme="tac"] .xp-pop { right: 0; left: auto; font: 20px TacA; color: #d6f25c; text-shadow: 0 0 8px rgba(0, 0, 0, 0.9); }
[data-theme="tac"] .intro-card h2 { text-transform: uppercase; letter-spacing: 0.12em; }
[data-theme="tac"] .intro-list li b { border-radius: 0; transform: rotate(45deg) scale(0.8); }