* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

:root {
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  overscroll-behavior: none;
}

body {
  font-family: system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}

#map { position: fixed; inset: 0; }
#fx, #grid { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
#hud > * { position: absolute; }
#hud button { pointer-events: auto; }

body:not([data-theme="west"]) .only-west,
body:not([data-theme="city"]) .only-city,
body:not([data-theme="block"]) .only-block,
body:not([data-theme="tac"]) .only-tac { display: none !important; }

.maplibregl-ctrl-bottom-left { bottom: calc(4px + var(--sb)); }
.maplibregl-ctrl-attrib.maplibregl-compact { opacity: 0.55; }

.player { width: 40px; height: 40px; display: grid; place-items: center; pointer-events: none; }
.player svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
.waypoint svg { display: block; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)); }

#dock {
  left: 50%;
  bottom: calc(16px + var(--sb));
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
#dock button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.ico svg { width: 24px; height: 24px; display: block; }

#route-info {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
#route-info button { pointer-events: auto; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 2px 4px; }

.panel {
  position: fixed;
  z-index: 5;
  left: 12px;
  right: 12px;
  max-width: 520px;
  margin: 0 auto;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border: var(--panel-border);
  font-family: var(--panel-font);
  box-shadow: var(--panel-shadow, 0 8px 30px rgba(0, 0, 0, 0.45));
  user-select: text;
}
.panel button { font: inherit; cursor: pointer; }

#search-panel { top: calc(12px + var(--st)); }
.search-row { display: flex; }
#search-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 17px;
  padding: 12px;
  background: var(--input-bg);
  color: var(--panel-fg);
  border: 0;
  outline: none;
  border-radius: 0;
}
#search-input::placeholder { color: var(--panel-fg); opacity: 0.55; }
#search-input::-webkit-search-cancel-button { display: none; }
#search-close { width: 48px; background: none; border: 0; color: var(--panel-fg); font-size: 18px; }
#search-results { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow: auto; }
#search-results li { padding: 10px 12px; border-top: 1px solid var(--line); cursor: pointer; }
#search-results li:active { background: var(--hover); }
#search-results li b { display: block; font-size: 16px; font-weight: normal; }
#search-results li small { display: block; opacity: 0.7; font-size: 13px; margin-top: 2px; }
#search-results li.empty { opacity: 0.7; cursor: default; }

#card { bottom: calc(100px + var(--sb)); padding: 14px 16px; }
.pc-type { font-size: 13px; opacity: 0.75; }
.pc-name { font-size: 20px; margin: 2px 0 12px; }
.pc-actions { display: flex; gap: 10px; }
.pc-actions button { flex: 1; padding: 10px; background: var(--btn-bg); color: var(--btn-fg); border: var(--btn-border); }

.theme-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px;
  background: var(--card-bg);
  border: var(--card-border);
  color: inherit;
  font: inherit;
  text-align: left;
}
.theme-card.active { outline: 3px solid var(--accent); outline-offset: -1px; }
.tc-preview { width: 100%; height: 74px; display: grid; place-items: center; margin-bottom: 4px; overflow: hidden; }
.tc-name { font-size: 16px; }
.tc-tag { font-size: 12px; opacity: 0.75; line-height: 1.25; }
.tc-preview::after { content: "Kadıköy"; }
.tc-west {
  background: radial-gradient(ellipse at center, transparent 45%, rgba(90, 55, 20, 0.45) 100%),
    linear-gradient(115deg, transparent 46%, #4a321d 46.5% 48.5%, #e8d9b0 48.5% 50%, #4a321d 50% 52%, transparent 52.5%),
    radial-gradient(circle at 78% 70%, #a9b4a2 0 18%, #4b3c2a 18.5% 20%, transparent 20.5%),
    #dcc9a0;
}
.tc-west::after { font-family: WestTitle; color: #2b1d10; font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase; content: "KADIKÖY"; text-shadow: 0 0 4px #e8dbb8; }
.tc-city {
  background: linear-gradient(90deg, transparent 30%, #a6adb5 30% 33%, transparent 33%),
    linear-gradient(0deg, transparent 58%, #8d959e 58% 61%, transparent 61%),
    radial-gradient(circle at 80% 25%, #2b5b7d 0 22%, transparent 22.5%),
    #3a3f45;
}
.tc-city::after { font-family: CityA; color: #fff; font-size: 22px; letter-spacing: 0.06em; content: "KADIKÖY"; text-shadow: 2px 2px 0 #000; }
.tc-block {
  background: conic-gradient(#7fb238 25%, #6f9e2e 0 50%, #7fb238 0 75%, #88bb40 0) 0 0 / 16px 16px;
  image-rendering: pixelated;
}
.tc-block::after { font-family: BlockA; color: #fff; font-size: 22px; text-shadow: 3px 3px 0 #3f3f3f; }
.tc-tac {
  background: repeating-linear-gradient(0deg, rgba(150, 200, 110, 0.18) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(150, 200, 110, 0.18) 0 1px, transparent 1px 24px),
    linear-gradient(120deg, transparent 50%, #6c805e 50% 52.5%, transparent 52.5%),
    #141913;
}
.tc-tac::after { font-family: TacA; color: #c4d6ad; font-size: 18px; letter-spacing: 0.2em; content: "[ KADIKÖY ]"; }

#toast {
  position: fixed;
  z-index: 6;
  top: calc(38% + var(--st));
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 16px;
  background: var(--toast-bg, rgba(0, 0, 0, 0.8));
  color: var(--toast-fg, #fff);
  font-family: var(--panel-font);
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
#toast.show { animation: toast 2.6s ease forwards; }
@keyframes toast { 0% { opacity: 0; } 10%, 75% { opacity: 1; } 100% { opacity: 0; } }

.flash { animation: flash 1.4s ease; }
@keyframes flash { 0% { opacity: 0; } 100% { opacity: 1; } }

/* ---------- Vahşi Batı ---------- */
[data-theme="west"] {
  --panel-bg: #e8dbb8;
  --panel-fg: #2b1d10;
  --panel-border: 2px solid #2b1d10;
  --panel-font: WestBook, serif;
  --panel-shadow: 0 6px 24px rgba(40, 20, 0, 0.5), inset 0 0 30px rgba(120, 80, 30, 0.3);
  --input-bg: rgba(255, 250, 235, 0.45);
  --line: rgba(43, 29, 16, 0.25);
  --hover: rgba(43, 29, 16, 0.1);
  --btn-bg: #1f160d;
  --btn-fg: #efe3c4;
  --btn-border: 0;
  --card-bg: rgba(255, 250, 235, 0.35);
  --card-border: 1.5px solid #2b1d10;
  --accent: #8a1c14;
  --toast-bg: #1f160d;
  --toast-fg: #efe3c4;
}
#fx.fx-west {
  background-image: var(--paper), radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 48%, rgba(95, 58, 20, 0.5) 100%);
  background-size: 256px 256px, 100% 100%;
  mix-blend-mode: multiply;
  box-shadow: inset 0 0 80px rgba(70, 40, 10, 0.55);
}
#w-banner {
  top: calc(14px + var(--st));
  left: 50%;
  transform: translateX(-50%);
  width: 92vw;
  text-align: center;
  color: #2b1d10;
  text-shadow: 0 0 6px rgba(232, 219, 184, 0.95), 0 0 2px rgba(232, 219, 184, 1);
}
.w-rule {
  width: 150px;
  height: 7px;
  margin: 0 auto 6px;
  border-top: 2px solid #2b1d10;
  border-bottom: 1px solid #2b1d10;
  opacity: 0.8;
}
#w-area { font-family: WestTitle; font-size: 27px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.1; }
#w-sub { font-family: WestScript; font-size: 17px; margin-top: 2px; }
#w-banner.flash #w-area { animation: westReveal 2s ease; }
@keyframes westReveal { 0% { opacity: 0; letter-spacing: 0.45em; } 100% { opacity: 1; letter-spacing: 0.14em; } }
#w-compass { left: 14px; bottom: calc(100px + var(--sb)); width: 80px; height: 80px; filter: drop-shadow(0 2px 3px rgba(40, 20, 0, 0.45)); }
#w-rose { width: 100%; height: 100%; transition: transform 0.15s linear; }
#w-coords {
  right: 14px;
  bottom: calc(104px + var(--sb));
  font-family: WestScript;
  font-size: 14px;
  color: #2b1d10;
  text-shadow: 0 0 4px #e8dbb8, 0 0 2px #e8dbb8;
  white-space: pre;
  text-align: right;
}
[data-theme="west"] #dock button {
  width: 62px;
  height: 60px;
  background: #1f160d;
  color: #efe3c4;
  font-family: WestStrong;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: polygon(3% 9%, 22% 1%, 55% 6%, 82% 0, 100% 11%, 96% 46%, 100% 88%, 77% 100%, 46% 94%, 15% 100%, 0 89%, 4% 50%);
}
[data-theme="west"] #dock button:active { background: #6b1410; }
[data-theme="west"] #route-info {
  top: calc(96px + var(--st));
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px 5px 18px;
  background: #1f160d;
  color: #efe3c4;
  font-family: WestScript;
  font-size: 16px;
  clip-path: polygon(0 12%, 6% 0, 50% 8%, 94% 0, 100% 15%, 98% 85%, 92% 100%, 50% 92%, 6% 100%, 2% 80%);
}
[data-theme="west"] .ri-label { font-family: WestStrong; text-transform: uppercase; letter-spacing: 0.12em; color: #e0a07a; }
[data-theme="west"] .panel { font-size: 16px; }
[data-theme="west"] .pc-name { font-family: WestTitle; letter-spacing: 0.08em; }

/* ---------- Şehir ---------- */
[data-theme="city"] {
  --panel-bg: rgba(10, 12, 14, 0.93);
  --panel-fg: #f2f2f2;
  --panel-border: 0;
  --panel-font: CityB, sans-serif;
  --input-bg: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.1);
  --hover: rgba(255, 255, 255, 0.12);
  --btn-bg: #f2f2f2;
  --btn-fg: #000;
  --btn-border: 0;
  --card-bg: rgba(255, 255, 255, 0.06);
  --card-border: 0;
  --accent: #c45cf2;
  --toast-bg: rgba(0, 0, 0, 0.82);
}
#fx.fx-city { background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.4) 100%); }
#c-stats { top: calc(12px + var(--st)); right: 16px; text-align: right; font-family: CityA; line-height: 1; }
#c-clock { font-size: 34px; color: #fff; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
#c-speed { font-size: 24px; color: #79c66f; margin-top: 4px; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
#c-radar { left: 16px; bottom: calc(92px + var(--sb)); width: 156px; }
#c-north {
  width: 24px;
  height: 24px;
  margin-bottom: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font: 700 14px CityA;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
.c-bars { display: flex; gap: 3px; padding: 3px; background: rgba(0, 0, 0, 0.6); }
.c-bar { flex: 1; height: 7px; background: rgba(255, 255, 255, 0.12); }
.c-bar i { display: block; height: 100%; width: 100%; transition: width 0.4s; }
#c-hp i { background: #4f9a4a; }
#c-ar i { background: #3b8fd6; width: 0; }
#c-place { right: 16px; bottom: calc(92px + var(--sb)); text-align: right; max-width: calc(100vw - 214px); }
#c-street {
  font-family: CityA;
  font-size: 25px;
  color: #fff;
  transform: skewX(-9deg);
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#c-area { font-family: CityB; font-size: 16px; color: #d6d6d6; text-shadow: 1px 1px 0 #000; }
[data-theme="city"] #dock button {
  width: 60px;
  height: 56px;
  background: rgba(8, 9, 11, 0.8);
  color: #fff;
  font-family: CityB;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-theme="city"] #dock button:active { background: #fff; color: #000; }
[data-theme="city"] #route-info {
  top: calc(14px + var(--st));
  left: 16px;
  padding: 6px 6px 6px 10px;
  background: rgba(0, 0, 0, 0.78);
  border-left: 5px solid #c45cf2;
  color: #fff;
  font-family: CityA;
  font-size: 18px;
}
[data-theme="city"] .ri-label { color: #d79af5; }
[data-theme="city"] .theme-card.active { background: rgba(255, 255, 255, 0.92); color: #000; outline: 0; }
[data-theme="city"] .pc-name { font-family: CityA; font-size: 24px; text-transform: uppercase; }

/* ---------- Blok ---------- */
[data-theme="block"] {
  --panel-bg: #c6c6c6;
  --panel-fg: #3f3f3f;
  --panel-border: 3px solid;
  --panel-font: BlockB, monospace;
  --panel-shadow: 0 0 0 2px #000, 0 10px 30px rgba(0, 0, 0, 0.5);
  --input-bg: #000;
  --line: #8b8b8b;
  --hover: #a5a5ff;
  --btn-bg: #6f6f6f;
  --btn-fg: #fff;
  --btn-border: 2px solid #000;
  --card-bg: #8b8b8b;
  --card-border: 3px solid;
  --accent: #fff;
  --toast-bg: rgba(0, 0, 0, 0.6);
}
[data-theme="block"] .maplibregl-canvas { image-rendering: pixelated; }
[data-theme="block"] .panel { border-color: #fff #555 #555 #fff; }
[data-theme="block"] #search-input { color: #e0e0e0; font-size: 18px; border: 2px solid #a0a0a0; }
[data-theme="block"] #search-results li b { color: #3f3f3f; }
[data-theme="block"] .theme-card { border-color: #373737 #fff #fff #373737; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; }
[data-theme="block"] .pc-actions button { border-color: #000; box-shadow: inset 2px 2px 0 #a8a8a8, inset -2px -3px 0 #4a4a4a; text-shadow: 2px 2px 0 #3f3f3f; }
[data-theme="block"] #toast { color: #fff; text-shadow: 2px 2px 0 #3f3f3f; font-size: 17px; }
#b-debug {
  top: calc(6px + var(--st));
  left: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  font-family: BlockB;
  font-size: 14px;
  color: #e0e0e0;
}
#b-debug span { background: rgba(80, 80, 80, 0.55); padding: 0 4px; text-shadow: 2px 2px 0 #3f3f3f; line-height: 1.3; white-space: nowrap; }
#b-title {
  top: 30%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: BlockA;
  font-size: 42px;
  color: #fff;
  text-shadow: 4px 4px 0 #3f3f3f;
  opacity: 0;
}
#b-title small { display: block; font-family: BlockB; font-size: 20px; color: #e0e0e0; text-shadow: 2px 2px 0 #3f3f3f; }
#b-title.show { animation: mcTitle 3.8s ease forwards; }
@keyframes mcTitle { 0% { opacity: 0; } 12%, 72% { opacity: 1; } 100% { opacity: 0; } }
#b-hearts { left: 50%; bottom: calc(92px + var(--sb)); transform: translateX(-50%); display: flex; }
#b-hearts svg { display: block; }
#b-itemname {
  left: 50%;
  bottom: calc(116px + var(--sb));
  transform: translateX(-50%);
  font-family: BlockB;
  font-size: 17px;
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
  white-space: nowrap;
  opacity: 0;
}
#b-itemname.show { animation: mcTitle 2.2s ease forwards; }
[data-theme="block"] #dock {
  gap: 0;
  padding: 3px;
  background: rgba(20, 20, 20, 0.72);
  box-shadow: 0 0 0 2px #000;
}
[data-theme="block"] #dock button {
  width: 58px;
  height: 58px;
  background: #8b8b8b;
  border: 3px solid;
  border-color: #373737 #fff #fff #373737;
}
[data-theme="block"] #dock button:active { box-shadow: 0 0 0 3px #fff; z-index: 1; }
[data-theme="block"] #dock .lbl { display: none; }
[data-theme="block"] .ico svg { width: 36px; height: 36px; }
[data-theme="block"] #route-info {
  top: calc(6px + var(--st));
  right: 6px;
  padding: 4px 4px 4px 10px;
  background: #6f6f6f;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 #a8a8a8, inset -2px -3px 0 #4a4a4a;
  color: #fff;
  font-family: BlockB;
  font-size: 15px;
  text-shadow: 2px 2px 0 #3f3f3f;
}

/* ---------- Taktik ---------- */
[data-theme="tac"] {
  --panel-bg: rgba(8, 11, 7, 0.95);
  --panel-fg: #c4d6ad;
  --panel-border: 1px solid rgba(160, 200, 110, 0.45);
  --panel-font: TacB, sans-serif;
  --input-bg: rgba(160, 200, 110, 0.08);
  --line: rgba(160, 200, 110, 0.18);
  --hover: rgba(214, 242, 92, 0.12);
  --btn-bg: #d6f25c;
  --btn-fg: #0b0e0a;
  --btn-border: 0;
  --card-bg: rgba(160, 200, 110, 0.06);
  --card-border: 1px solid rgba(160, 200, 110, 0.3);
  --accent: #d6f25c;
  --toast-bg: rgba(8, 11, 7, 0.9);
  --toast-fg: #d6f25c;
}
#fx.fx-tac {
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.62) 100%);
}
#t-compass {
  top: calc(8px + var(--st));
  left: 50%;
  transform: translateX(-50%);
  width: min(78vw, 420px);
  height: 58px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
#t-tape { position: absolute; left: 0; top: 0; height: 32px; width: 4400px; will-change: transform; }
#t-tape i { position: absolute; top: 22px; width: 1px; height: 6px; background: rgba(196, 214, 173, 0.55); }
#t-tape i.md { top: 18px; height: 10px; }
#t-tape i.mj { top: 16px; height: 14px; width: 2px; background: #d6f25c; }
#t-tape b {
  position: absolute;
  top: 1px;
  transform: translateX(-50%);
  font: 600 11px TacA;
  color: rgba(196, 214, 173, 0.7);
}
#t-tape b.card { font-size: 14px; top: -1px; color: #e8ffb0; }
#t-needle {
  position: absolute;
  left: 50%;
  top: 31px;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 7px solid #d6f25c;
}
#t-deg {
  position: absolute;
  left: 50%;
  top: 39px;
  transform: translateX(-50%);
  padding: 0 6px;
  border: 1px solid rgba(214, 242, 92, 0.6);
  background: rgba(8, 11, 7, 0.8);
  font: 600 12px TacA;
  color: #d6f25c;
  letter-spacing: 0.1em;
}
#t-info {
  top: calc(76px + var(--st));
  left: 14px;
  font-family: TacA;
  color: #c4d6ad;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}
#t-area { font-size: 16px; }
#t-sub { font-size: 12px; opacity: 0.7; }
#t-grid { font-size: 11px; color: #d6f25c; margin-top: 5px; }
#t-coords {
  left: 14px;
  bottom: calc(96px + var(--sb));
  display: flex;
  flex-direction: column;
  font-family: TacB;
  font-size: 12px;
  color: #9fb38a;
  letter-spacing: 0.08em;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}
[data-theme="tac"] #dock button {
  width: 60px;
  height: 56px;
  background: rgba(10, 14, 9, 0.82);
  border: 1px solid rgba(160, 200, 110, 0.38);
  color: #c4d6ad;
  font: 600 11px TacA;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
[data-theme="tac"] #dock button:active { background: rgba(214, 242, 92, 0.18); border-color: #d6f25c; color: #d6f25c; }
[data-theme="tac"] #route-info {
  top: calc(76px + var(--st));
  right: 14px;
  padding: 4px 4px 4px 10px;
  border: 1px solid #f2b33d;
  background: rgba(30, 20, 5, 0.78);
  color: #f2b33d;
  font: 600 13px TacA;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
[data-theme="tac"] .pc-name, [data-theme="tac"] .tc-name { font-family: TacA; text-transform: uppercase; letter-spacing: 0.14em; }
[data-theme="tac"] .player { position: relative; }
.player .pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 2px solid #d6f25c;
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }