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

body {
  font-family: 'Segoe UI', sans-serif;
  background: #3a2c1a;
  color: #e8d5a3;
  min-height: 100vh;
}

/* ===== AUTH ===== */
#auth-screen {
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh;
  background: radial-gradient(circle at center, #2d1f0a 0%, #0f0a02 100%);
}
.auth-box {
  background: #2a1e0e; border: 2px solid #8b6914; border-radius: 12px;
  padding: 40px; width: 360px;
  box-shadow: 0 0 40px rgba(139,105,20,0.3);
}
.auth-box h1 { text-align: center; font-size: 1.8rem; color: #f0c040; margin-bottom: 6px; text-shadow: 0 0 10px rgba(240,192,64,0.5); }
.subtitle { text-align: center; color: #a08040; margin-bottom: 20px; font-size: 0.85rem; }
.tab-buttons { display: flex; gap: 8px; margin-bottom: 20px; }
.tab-btn { flex: 1; padding: 9px; border: 1px solid #8b6914; background: #1a1207; color: #c0a060; border-radius: 6px; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; }
.tab-btn.active { background: #8b6914; color: #fff; }
.auth-form { display: none; }
.auth-form.active { display: block; }
.auth-form input { width: 100%; padding: 10px 12px; margin-bottom: 12px; background: #1a1207; border: 1px solid #5a4010; border-radius: 6px; color: #e8d5a3; font-size: 0.95rem; }
.auth-form input:focus { outline: none; border-color: #f0c040; }
.btn-primary { width: 100%; padding: 12px; background: linear-gradient(135deg, #8b6914, #c0900a); border: none; border-radius: 6px; color: #fff; font-size: 1rem; font-weight: bold; cursor: pointer; transition: opacity 0.2s; }
.btn-primary:hover { opacity: 0.85; }
.msg { margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; text-align: center; display: none; }
.msg.error { background: #4a1010; color: #f08080; display: block; }
.msg.success { background: #104010; color: #80f080; display: block; }

/* ===== HEADER ===== */
#game-screen { display: none; }
header {
  background: #1e1508; border-bottom: 2px solid #8b6914;
  padding: 0 20px; display: flex; align-items: center; gap: 16px; height: 54px;
}
.logo { font-size: 1.1rem; color: #f0c040; font-weight: bold; white-space: nowrap; }
.main-nav { display: flex; gap: 4px; flex: 1; }
.nav-tab {
  padding: 8px 14px; background: transparent; border: none;
  color: #a08040; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
  transition: all 0.2s; border-bottom: 2px solid transparent;
}
.nav-tab:hover { color: #f0c040; background: #2a1e0e; }
.nav-tab.active { color: #f0c040; border-bottom-color: #f0c040; background: #2a1e0e; }
.header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.player-name { color: #c0a060; font-size: 0.85rem; }
.btn-logout { background: #3a1010; border: 1px solid #6b2020; color: #f08080; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; }

/* ===== KAYNAK ÇUBUĞU ===== */
.resource-bar {
  background: #160e04; border-bottom: 1px solid #3a2a08;
  padding: 8px 20px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
}
.res-item { display: flex; align-items: center; gap: 8px; }
.res-icon { font-size: 1.1rem; }
.res-label { display: block; font-size: 0.65rem; color: #806030; text-transform: uppercase; }
.res-value { display: block; font-size: 0.95rem; color: #f0e0a0; font-weight: bold; }
.res-rate { display: block; font-size: 0.65rem; color: #606040; }
.troops-bar { margin-left: auto; display: flex; gap: 16px; color: #c0a060; font-size: 0.85rem; }
.troops-bar span { white-space: nowrap; }

/* ===== GENEL ===== */
.tab-content { min-height: calc(100vh - 110px); }
.game-content { max-width: 1100px; margin: 0 auto; padding: 24px; }
.section-title { font-size: 1.1rem; color: #f0c040; margin: 24px 0 14px; border-bottom: 1px solid #3a2a08; padding-bottom: 8px; }
.loading { text-align: center; padding: 60px; color: #806030; }
.empty-msg { color: #604020; font-size: 0.9rem; padding: 16px 0; }

/* ===== KÖY ===== */
.section-header { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 4px; }
.village-title { font-size: 1.3rem; color: #f0c040; }
.village-coord { color: #806030; font-size: 0.85rem; margin-top: 2px; }

/* Bina kartları */
.buildings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.building-card {
  background: #2a1e0e; border: 1px solid #4a3010; border-radius: 10px;
  padding: 18px; transition: border-color 0.2s;
}
.building-card:hover { border-color: #8b6914; }
.b-icon { font-size: 1.8rem; margin-bottom: 8px; }
.b-name { font-size: 0.95rem; color: #f0d080; font-weight: bold; }
.b-level { color: #a08040; font-size: 0.8rem; margin-bottom: 6px; }
.b-rate { color: #70a050; font-size: 0.75rem; margin-bottom: 10px; }
.b-costs { font-size: 0.72rem; color: #806040; margin-bottom: 10px; line-height: 1.7; }
.b-costs .ci { display: flex; justify-content: space-between; }
.btn-upgrade {
  width: 100%; padding: 7px; background: #3a2808; border: 1px solid #6a4810;
  border-radius: 6px; color: #d0b060; font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
}
.btn-upgrade:hover:not(:disabled) { background: #6a4810; color: #fff; }
.btn-upgrade:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-upgrade.ok { border-color: #50a030; color: #80d060; }
.btn-upgrade.ok:hover:not(:disabled) { background: #204010; }

/* Asker kartları */
.troops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.troop-card {
  background: #1e1a0e; border: 1px solid #4a3810; border-radius: 10px; padding: 18px;
}
.t-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.t-icon { font-size: 1.6rem; }
.t-name { font-size: 0.95rem; color: #f0d080; font-weight: bold; }
.t-count { font-size: 0.8rem; color: #a08040; }
.t-stats { font-size: 0.75rem; color: #807050; margin-bottom: 10px; line-height: 1.7; }
.t-stats .si { display: flex; justify-content: space-between; }
.t-locked { font-size: 0.8rem; color: #604030; padding: 8px 0; }
.train-row { display: flex; gap: 8px; align-items: center; }
.train-input {
  width: 70px; padding: 6px 8px; background: #1a1207;
  border: 1px solid #4a3010; border-radius: 6px; color: #e8d5a3;
  font-size: 0.9rem; text-align: center;
}
.btn-train {
  flex: 1; padding: 7px; background: #3a2020; border: 1px solid #8a3020;
  border-radius: 6px; color: #e08060; font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
}
.btn-train:hover { background: #6a2010; color: #fff; }

/* ===== HARİTA ===== */
.map-legend { font-size: 0.82rem; color: #806030; margin-bottom: 12px; }
.map-wrapper { overflow: auto; max-width: 100%; margin-bottom: 20px; }
#world-map { display: block; border: 2px solid #4a3010; border-radius: 8px; cursor: crosshair; background: #0a1205; }
.village-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.vl-card {
  background: #2a1e0e; border: 1px solid #4a3010; border-radius: 8px;
  padding: 14px; display: flex; justify-content: space-between; align-items: center;
}
.vl-card.own { border-color: #8b6914; }
.vl-info .vl-name { font-size: 0.9rem; color: #f0d080; }
.vl-info .vl-owner { font-size: 0.75rem; color: #806030; margin-top: 2px; }
.vl-coord { font-size: 0.75rem; color: #605040; }
.btn-attack {
  padding: 6px 14px; background: #4a1010; border: 1px solid #8a2020;
  border-radius: 6px; color: #f08060; font-size: 0.8rem; cursor: pointer;
}
.btn-attack:hover { background: #6a1010; }

/* ===== SALDIRILAR ===== */
.attacks-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 700px) { .attacks-columns { grid-template-columns: 1fr; } }
.attack-card {
  background: #1e1508; border: 1px solid #3a2808; border-radius: 8px;
  padding: 14px; margin-bottom: 10px; font-size: 0.85rem;
}
.attack-card.won { border-color: #204010; }
.attack-card.lost { border-color: #401010; }
.attack-card.pending { border-color: #404010; }
.atk-title { font-size: 0.9rem; color: #e0c080; margin-bottom: 6px; }
.atk-detail { color: #806040; line-height: 1.8; }
.atk-loot { color: #70a040; }
.atk-countdown { color: #c0a020; font-weight: bold; }

/* ===== LİDERBOARD ===== */
.leaderboard-table { width: 100%; border-collapse: collapse; }
.leaderboard-table th { background: #2a1e0e; padding: 10px 14px; text-align: left; color: #c0a060; font-size: 0.85rem; border-bottom: 2px solid #4a3010; }
.leaderboard-table td { padding: 10px 14px; border-bottom: 1px solid #2a1e0e; font-size: 0.9rem; }
.leaderboard-table tr:hover td { background: #1e1508; }
.rank-1 td { color: #f0c040; font-weight: bold; }
.rank-2 td { color: #d0d0d0; }
.rank-3 td { color: #c08040; }

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-box {
  background: #2a1e0e; border: 2px solid #8b6914; border-radius: 12px;
  padding: 32px; width: 420px; max-width: 95vw;
}
.modal-box h2 { color: #f0c040; margin-bottom: 16px; }
.modal-target { background: #1a1207; border-radius: 8px; padding: 12px; margin-bottom: 16px; font-size: 0.9rem; color: #c0a060; }
.troop-inputs .ti-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.troop-inputs .ti-label { flex: 1; font-size: 0.9rem; }
.troop-inputs .ti-have { font-size: 0.78rem; color: #806030; }
.troop-inputs input[type=number] { width: 90px; padding: 7px 10px; background: #1a1207; border: 1px solid #5a4010; border-radius: 6px; color: #e8d5a3; font-size: 0.9rem; text-align: center; }
.modal-buttons { display: flex; gap: 10px; margin-top: 16px; }
.btn-danger { flex: 1; padding: 11px; background: linear-gradient(135deg, #8a1010, #c02020); border: none; border-radius: 6px; color: #fff; font-size: 0.95rem; font-weight: bold; cursor: pointer; }
.btn-danger:hover { opacity: 0.85; }
.btn-secondary { padding: 11px 20px; background: #3a2808; border: 1px solid #6a4810; border-radius: 6px; color: #c0a060; cursor: pointer; }

/* ===== TOAST ===== */
#toast {
  position: fixed; bottom: 20px; right: 20px;
  background: #1e3a1e; border: 1px solid #40a040; color: #80f080;
  padding: 10px 18px; border-radius: 8px; font-size: 0.88rem;
  opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 200;
}
#toast.show { opacity: 1; }
#toast.err { background: #3a1e1e; border-color: #a04040; color: #f08080; }

/* İnşaat kuyruğu */
.queue-count { color: #a08040; font-size: 0.85rem; font-weight: normal; }
.construction-queue {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}
.construction-queue::-webkit-scrollbar { width: 8px; }
.construction-queue::-webkit-scrollbar-track { background: #1a1208; border-radius: 4px; }
.construction-queue::-webkit-scrollbar-thumb { background: #4a3010; border-radius: 4px; }
.construction-queue::-webkit-scrollbar-thumb:hover { background: #6a4520; }
.queue-item {
  background: #211708;
  border: 1px solid #4a3010;
  border-radius: 8px;
  padding: 10px 12px;
  color: #d0b060;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.queue-item-info { flex: 1; }
.queue-time { color: #80d060; white-space: nowrap; margin-top: 4px; }
.queued-level { color: #80d060; }
.queue-cancel-btn {
  background: #5a1010;
  border: 1px solid #8a2020;
  color: #ff9090;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.queue-cancel-btn:hover { background: #8a2020; color: #fff; }


/* ===== TEST PANELİ ===== */
.test-panel {
  margin: 12px 0 18px 0;
  padding: 12px;
  background: #241608;
  border: 1px dashed #b08020;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.test-title {
  color: #f0c040;
  font-weight: bold;
  font-size: 0.95rem;
}
.test-title span {
  color: #a08040;
  font-size: 0.78rem;
  font-weight: normal;
  margin-left: 6px;
}
.test-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-test {
  padding: 8px 12px;
  background: linear-gradient(135deg, #3a2a08, #6a4810);
  border: 1px solid #b08020;
  border-radius: 8px;
  color: #f0d080;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.82rem;
}
.btn-test:hover { filter: brightness(1.15); }

.report-box { margin-top: 8px; padding: 8px; border-radius: 8px; background: rgba(255, 230, 170, 0.08); border: 1px solid rgba(240, 190, 80, 0.25); }
.report-section { margin-top: 7px; line-height: 1.45; }
.attack-card.spy { border-color: #4fa3ff; }
.spy-report { color: #d9ecff; }
.battle-report { color: #ffe7b0; }

.premium-status {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  font-weight: 700;
}


/* ===== Demirci ===== */
.modal-head-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.smithy-modal-box { width:min(1100px, 96vw); max-height:90vh; overflow:auto; }
.smithy-help { color:#c7a66a; margin:4px 0 12px; }
.smithy-top { margin:8px 0 14px; padding:8px 10px; border:1px solid rgba(220,170,80,.35); border-radius:8px; background:rgba(255,220,130,.06); }
.smithy-columns { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.smithy-col { border:1px solid rgba(210,160,70,.35); border-radius:12px; padding:10px; background:rgba(40,25,10,.35); }
.smithy-col h3 { margin:0 0 10px; color:#f0c060; font-size:16px; }
.smithy-item { border:1px solid rgba(200,150,70,.35); border-radius:10px; padding:9px; margin-bottom:8px; background:rgba(255,240,180,.04); }
.smithy-item.ready { border-color:#8bc36a; }
.smithy-item.done { border-color:#d0b060; background:rgba(120,90,20,.25); }
.smithy-item.locked { opacity:.7; }
.smithy-unit { display:flex; align-items:center; gap:8px; font-size:15px; }
.smithy-unit span { font-size:22px; }
.smithy-status { margin-top:6px; font-weight:bold; }
.smithy-req, .smithy-cost { margin-top:4px; font-size:12px; color:#d5bd8a; }
.btn-smithy { width:100%; margin-top:8px; padding:7px 8px; border-radius:8px; border:1px solid #7d5a1f; background:#2b2012; color:#d7bc78; cursor:pointer; }
.btn-smithy.ok { border-color:#5fa447; color:#9ee085; }
.btn-smithy:disabled { opacity:.55; cursor:not-allowed; }
@media (max-width: 850px) { .smithy-columns { grid-template-columns:1fr; } }

/* Barbar köy kartları */
.vl-card.barbar {
  border-color: rgba(120,120,120,.45);
  background: linear-gradient(135deg, rgba(75,75,75,.18), rgba(30,30,30,.12));
}
.vl-card.barbar .vl-name { color: #d0d0d0; }
.vl-card.barbar .vl-owner { color: #a8a8a8; }

/* Ust segment pratik menusu */
.quick-menu {
  display: flex;
  gap: 0;
  overflow-x: auto;
  background: linear-gradient(180deg, #2b261a, #171108);
  border-bottom: 2px solid #c7a56a;
  padding: 7px 10px 6px;
}

.quick-menu button {
  flex: 0 0 86px;
  min-height: 60px;
  border: 0;
  border-right: 1px solid rgba(255, 232, 180, .14);
  background: transparent;
  color: #f8e3b0;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 3px;
  font-size: .74rem;
}

.quick-menu button:hover {
  background: rgba(255, 232, 180, .12);
}

.quick-menu span {
  font-size: 1.35rem;
  line-height: 1;
}

.quick-menu b {
  font-weight: 700;
  line-height: 1.05;
}

#village-panel > h2.section-title,
#village-panel > .construction-queue,
#village-panel > .buildings-grid,
#village-panel > .troops-grid {
  display: none !important;
}

.village-troop-overview {
  width: min(1020px, 100%);
  margin: 0 auto 8px;
  background: #f7e3b8;
  border: 1px solid #b9965e;
  color: #24180e;
}

.troop-overview-title {
  padding: 7px 9px;
  font-weight: 800;
}

.village-troop-overview table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.village-troop-overview th,
.village-troop-overview td {
  border: 1px solid #c7a56a;
  padding: 5px;
  text-align: center;
  font-size: .82rem;
}

.village-troop-overview th:first-child,
.village-troop-overview td:first-child {
  text-align: left;
  font-weight: 700;
  width: 118px;
  font-size: .74rem;
  line-height: 1.15;
}

.main-queue-section,
.construction-manager {
  margin-top: 12px;
  padding: 12px;
  background: #f7e3b8;
  border: 1px solid #b9965e;
}

.main-queue-section h3,
.construction-manager h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.main-queue-list,
.construction-card-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}
.main-queue-list::-webkit-scrollbar,
.construction-card-grid::-webkit-scrollbar { width: 8px; }
.main-queue-list::-webkit-scrollbar-track,
.construction-card-grid::-webkit-scrollbar-track { background: #ecd9a8; border-radius: 4px; }
.main-queue-list::-webkit-scrollbar-thumb,
.construction-card-grid::-webkit-scrollbar-thumb { background: #c7a56a; border-radius: 4px; }

.main-queue-card,
.construction-card {
  background: #fff0c8;
  border: 1px solid #c7a56a;
  padding: 9px;
  flex-shrink: 0;
}

.main-queue-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.main-queue-card-info { flex: 1; }

.main-queue-card span {
  display: block;
  color: #6e512d;
  margin-top: 2px;
}

.construction-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.construction-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: #37261a;
  border: 1px solid #5a3f28;
  border-radius: 4px;
  font-size: 1.5rem;
}

.construction-card-head b,
.construction-card-head span {
  display: block;
}

.construction-card-head span {
  color: #6e512d;
  font-size: .82rem;
}

.construction-card-costs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 8px 0;
  font-weight: 700;
}

.construction-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.construction-manager {
  overflow: hidden;
}

.construction-row-head,
.construction-row {
  display: grid;
  grid-template-columns: minmax(185px, 1.4fr) 70px 76px 70px 70px 70px 52px 82px 126px;
  gap: 0;
  align-items: center;
}

.construction-row-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0;
  background: #e9d19e;
  color: #2b1707;
  font-weight: 800;
  font-size: .78rem;
  border: 1px solid #c7a56a;
  border-bottom: 0;
}

.construction-row-head span {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 5px 7px;
  border-right: 1px solid #c7a56a;
}

.construction-row-list {
  max-height: min(48vh, 430px);
  overflow-y: auto;
  border: 1px solid #c7a56a;
  border-top: 0;
  background: #fff1cc;
}

.construction-show-all {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #c7a56a;
  border-top: 0;
  background: #f7e3b6;
  color: #3f220d;
  font-weight: 800;
}

.construction-show-all input {
  width: 15px;
  height: 15px;
}

.construction-row {
  min-height: 36px;
  padding: 0;
  border-bottom: 1px solid #d7bd82;
}

.construction-row:nth-child(even) {
  background: #f7e3b6;
}

.construction-row-main {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 4px 7px;
  border-right: 1px solid #d7bd82;
}

.construction-row-main b {
  color: #7a2506;
  font-size: .86rem;
}

.construction-row-level,
.construction-row-status {
  color: #6e512d;
  font-size: .82rem;
}

.construction-row-level,
.construction-resource-cell,
.construction-row-time,
.construction-row-action {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border-right: 1px solid #d7bd82;
}

.construction-resource-cell {
  font-weight: 800;
  font-size: .82rem;
  color: #1d1308;
}

.construction-row-time {
  font-weight: 800;
  color: #7b2108;
  white-space: nowrap;
}

.construction-progress {
  min-height: 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
  align-items: center;
  padding: 4px 6px;
  border-right: 1px solid #d7bd82;
}

.construction-progress span {
  height: 13px;
  border: 1px solid #b06b20;
  background: linear-gradient(90deg, #ec9b36 var(--progress, 0%), #f9e8bc 0);
  position: relative;
}

.construction-progress em {
  font-style: normal;
  font-size: .78rem;
  color: #3b250c;
}

.construction-row-action .btn-upgrade {
  width: 100%;
  min-height: 27px;
  padding: 6px 8px;
}

.construction-row .construction-icon {
  width: 56px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  overflow: hidden;
  padding: 3px;
}
.construction-row .construction-icon img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.construction-row.locked {
  grid-template-columns: minmax(185px, 1.4fr) 70px 1fr;
}

.construction-row.locked .construction-row-requirements {
  min-height: 36px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 8px;
  color: #3d250d;
}

.construction-req-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid #d3b77c;
  border-radius: 4px;
  background: #fff4d6;
  color: #8b2b07;
  font-weight: 800;
  white-space: nowrap;
}

/* Küçük zorunlu bina ibareleri */
.construction-row-requirements-mini {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 6px;
}
.req-mini-label {
  font-size: 0.68rem;
  color: #a05030;
  font-weight: 700;
  white-space: nowrap;
}
.req-mini-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border: 1px solid #d3b77c;
  border-radius: 3px;
  background: #fff4d6;
  color: #8b2b07;
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
}

#test-panel {
  display: none !important;
}

#test-panel.village-progress-panel {
  display: block !important;
}

.test-buttons-panel {
  display: block;
  background: #211708;
  border: 1px solid #4a3010;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.village-progress-panel {
  width: min(1020px, 100%);
  margin: 10px auto 0;
  padding: 12px;
  background: linear-gradient(180deg, #f6e8c8, #e4c78e);
  border: 1px solid #b9965e;
  color: #24180e;
}

.progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.progress-head b,
.progress-head span {
  display: block;
}

.progress-head span {
  color: #6e512d;
  font-size: .82rem;
  margin-top: 2px;
}

.progress-head strong {
  font-size: 1.05rem;
}

.progress-head.points {
  margin-top: 11px;
}

.progress-track {
  height: 18px;
  background: #fff0c8;
  border: 1px solid #9d7a42;
  overflow: hidden;
}

.progress-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #d87421, #ffb347);
}

.progress-track.points span {
  background: linear-gradient(90deg, #2f7a24, #75bd4a);
}

.building-modal-box {
  width: min(1180px, 97vw) !important;
  max-height: 94vh;
}

.main-test-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  background: #ead2a3;
  border: 1px solid #b9965e;
}

.main-test-actions .btn-test {
  min-width: 150px;
}

.construction-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.construction-card {
  padding: 8px;
}

.construction-card-costs {
  font-size: .8rem;
}

.construction-card-foot {
  align-items: stretch;
}

.construction-card-foot .btn-upgrade {
  width: auto;
  min-width: 104px;
}

.quick-menu button.quick-test {
  flex-basis: 108px;
  color: #dff7c8;
  background: rgba(46, 96, 28, .22);
}

.main-building-head {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  padding: 12px;
  background: #f7e3b8;
  border: 1px solid #b9965e;
}

.construction-manager {
  margin-top: 12px;
  overflow-x: auto;
  border: 1px solid #b9965e;
  background: #fff0c8;
}

.construction-manager table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.construction-manager th,
.construction-manager td {
  padding: 8px 9px;
  border-bottom: 1px solid #d2b37a;
  border-right: 1px solid #d2b37a;
  vertical-align: middle;
  font-size: .86rem;
}

.construction-manager th {
  background: linear-gradient(180deg, #3a2414, #1a0f07);
  color: #fff4d7;
  text-align: left;
}

.construction-manager .construct-name {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.construction-manager .building-costs {
  padding: 0;
  border: 0;
  background: transparent;
}

.construction-manager .btn-upgrade {
  min-width: 110px;
}

/* ===== 2026 Barbar Koyu tema yenilemesi ===== */
:root {
  --bg-deep: #3a2c1a;
  --bg-panel: #171c1a;
  --bg-panel-2: #20241e;
  --wood: #55351d;
  --wood-light: #8c6334;
  --stone: #485052;
  --stone-dark: #252c2d;
  --gold: #e4b64f;
  --gold-soft: #f4d889;
  --green: #7fb069;
  --green-dark: #2d4a36;
  --red: #b94b3f;
  --text-main: #f0e5cf;
  --text-muted: #aeb29f;
  --line: rgba(228, 182, 79, 0.24);
}

html { background: var(--bg-deep); }

body {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(185, 130, 63, 0.15), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(160, 120, 70, 0.10), transparent 30%),
    linear-gradient(180deg, #42321d 0%, #3a2c1a 48%, #2a1f12 100%);
  color: var(--text-main);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0.05));
}

#auth-screen {
  background:
    radial-gradient(circle at 50% 28%, rgba(228, 182, 79, 0.22), transparent 26%),
    linear-gradient(180deg, rgba(13,17,16,0.78), rgba(13,17,16,0.98)),
    repeating-linear-gradient(135deg, #1a211d 0 12px, #141917 12px 24px);
  padding: 18px;
}

.auth-box {
  width: min(390px, 94vw);
  background: linear-gradient(180deg, rgba(32,36,30,0.97), rgba(18,22,20,0.98));
  border: 1px solid rgba(228, 182, 79, 0.42);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}

.auth-box h1,
.logo,
.section-title,
.village-title,
.modal-box h2 {
  color: var(--gold-soft);
  text-shadow: 0 2px 12px rgba(228, 182, 79, 0.2);
}

.subtitle,
.player-name,
.village-coord,
.map-legend,
.empty-msg,
.t-count,
.b-level,
.atk-detail,
.vl-info .vl-owner {
  color: var(--text-muted);
}

header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: auto;
  min-height: 60px;
  padding: 10px 18px;
  background: rgba(14, 18, 17, 0.94);
  border-bottom: 1px solid rgba(228, 182, 79, 0.28);
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  backdrop-filter: blur(10px);
}

.logo {
  letter-spacing: 0;
  padding-right: 8px;
}

.main-nav {
  gap: 6px;
  flex-wrap: wrap;
}

.nav-tab,
.tab-btn,
.btn-secondary,
.btn-logout,
.btn-upgrade,
.btn-train,
.btn-test,
.btn-attack,
.btn-smithy,
.btn-primary,
.btn-danger {
  border-radius: 6px;
}

.nav-tab {
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  color: #c9c6b4;
  padding: 9px 12px;
}

.nav-tab:hover,
.nav-tab.active {
  color: var(--gold-soft);
  background: linear-gradient(180deg, rgba(85,53,29,0.82), rgba(32,36,30,0.82));
  border-color: rgba(228,182,79,0.32);
  box-shadow: inset 0 -2px 0 var(--gold);
}

.resource-bar {
  position: sticky;
  top: 60px;
  z-index: 25;
  background: linear-gradient(180deg, rgba(32,36,30,0.97), rgba(18,22,20,0.97));
  border-bottom: 1px solid rgba(127, 176, 105, 0.22);
  padding: 10px 18px;
  gap: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.24);
}

.res-item {
  min-width: 118px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(228, 182, 79, 0.14);
  border-radius: 7px;
}

.res-label {
  color: #9ca895;
  letter-spacing: 0;
}

.res-value {
  color: #fff2c7;
  font-size: 1rem;
}

.res-rate {
  color: #8fbe77;
}

.troops-bar {
  min-width: min(100%, 280px);
  justify-content: flex-start;
  overflow-x: auto;
}

.game-content {
  max-width: 1180px;
  padding: 22px;
}

.village-hero {
  position: relative;
  height: 176px;
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid rgba(228, 182, 79, 0.25);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(32,45,48,0.92) 0%, rgba(39,55,49,0.82) 54%, rgba(45,42,29,0.95) 100%);
  box-shadow: 0 18px 42px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.07);
}

.village-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 18%, rgba(244,216,137,0.34), transparent 15%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.22));
}

.hero-sky,
.hero-hills,
.hero-wall,
.hero-huts,
.hero-fire {
  position: absolute;
  inset: 0;
}

.hero-hills {
  top: 70px;
  background:
    radial-gradient(ellipse at 18% 100%, #243b32 0 34%, transparent 35%),
    radial-gradient(ellipse at 54% 100%, #2b4a38 0 42%, transparent 43%),
    radial-gradient(ellipse at 86% 100%, #22352f 0 30%, transparent 31%);
}

.hero-wall {
  top: 106px;
  left: 7%;
  right: 7%;
  height: 44px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  z-index: 3;
}

.hero-wall span {
  width: 18%;
  height: 32px;
  background: linear-gradient(180deg, #596164, #303839);
  border: 1px solid rgba(0,0,0,0.32);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.08);
}

.hero-huts {
  z-index: 4;
}

.hut {
  position: absolute;
  bottom: 24px;
  width: 74px;
  height: 44px;
  background: linear-gradient(180deg, #6d4426, #342014);
  border: 1px solid rgba(0,0,0,0.35);
  clip-path: polygon(50% 0, 100% 35%, 100% 100%, 0 100%, 0 35%);
}

.hut::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 17px;
  height: 18px;
  background: rgba(12, 10, 8, 0.65);
  border-radius: 8px 8px 0 0;
}

.hut-1 { left: 15%; transform: scale(1.12); }
.hut-2 { left: 43%; bottom: 18px; }
.hut-3 { right: 15%; transform: scale(0.92); }

.hero-fire {
  left: 50%;
  top: auto;
  bottom: 20px;
  width: 34px;
  height: 44px;
  transform: translateX(-50%);
  z-index: 5;
  background:
    radial-gradient(circle at 50% 82%, #21160d 0 42%, transparent 44%),
    radial-gradient(ellipse at 50% 58%, #ffd166 0 18%, #f05a28 19% 44%, transparent 46%);
  filter: drop-shadow(0 0 14px rgba(240,90,40,0.75));
}

.smoke {
  position: absolute;
  bottom: 78px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(230,230,220,0.12);
  filter: blur(3px);
  z-index: 2;
}

.smoke-1 { left: 47%; }
.smoke-2 { left: 50%; bottom: 96px; width: 34px; height: 34px; }
.smoke-3 { left: 53%; bottom: 120px; width: 42px; height: 42px; opacity: 0.7; }

.section-header {
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(228, 182, 79, 0.16);
  border-radius: 8px;
}

.section-title {
  border-bottom: 1px solid rgba(228, 182, 79, 0.2);
}

.building-card,
.troop-card,
.attack-card,
.vl-card,
.queue-item,
.smithy-col,
.smithy-item,
.modal-box,
.test-panel,
.leaderboard-table th {
  background: linear-gradient(180deg, rgba(32,36,30,0.95), rgba(20,24,22,0.96));
  border-color: rgba(228, 182, 79, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.building-card,
.troop-card {
  position: relative;
  min-height: 210px;
}

.building-card::before,
.troop-card::before,
.vl-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 3px solid rgba(127,176,105,0.32);
  pointer-events: none;
}

.building-card:hover,
.troop-card:hover,
.vl-card:hover {
  border-color: rgba(228, 182, 79, 0.48);
  transform: translateY(-1px);
  transition: border-color 0.18s, transform 0.18s;
}

.b-icon,
.t-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(85,53,29,0.9), rgba(37,44,45,0.95));
  border: 1px solid rgba(228, 182, 79, 0.22);
  font-size: 1.45rem;
}

.b-name,
.t-name,
.vl-info .vl-name,
.atk-title {
  color: #f4dfab;
}

.b-rate,
.atk-loot,
.queue-time {
  color: #8fd07b;
}

.btn-primary,
.btn-upgrade.ok,
.btn-smithy.ok {
  background: linear-gradient(180deg, #355d3f, #203c2b);
  border: 1px solid rgba(143,208,123,0.55);
  color: #dff7d8;
}

.btn-upgrade,
.btn-secondary,
.btn-test,
.tab-btn {
  background: linear-gradient(180deg, rgba(85,53,29,0.9), rgba(37,44,45,0.95));
  border-color: rgba(228, 182, 79, 0.3);
  color: #ead196;
}

.btn-danger,
.btn-train,
.btn-attack {
  background: linear-gradient(180deg, #8c372f, #4a1714);
  border-color: rgba(244, 132, 104, 0.55);
  color: #ffe3d8;
}

.btn-logout {
  background: rgba(140,55,47,0.22);
  border-color: rgba(244,132,104,0.42);
  color: #ffb4a5;
}

input,
.auth-form input,
.train-input,
.troop-inputs input[type=number] {
  background: rgba(8,12,12,0.74);
  border-color: rgba(228, 182, 79, 0.25);
  color: var(--text-main);
}

#world-map {
  width: min(600px, 100%);
  height: auto;
  border-color: rgba(228, 182, 79, 0.32);
  background:
    radial-gradient(circle at 35% 34%, rgba(127,176,105,0.16), transparent 18%),
    radial-gradient(circle at 70% 72%, rgba(185,75,63,0.14), transparent 20%),
    #0b1512;
  box-shadow: 0 18px 44px rgba(0,0,0,0.28);
}

.leaderboard-table {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(228, 182, 79, 0.16);
}

.leaderboard-table td {
  border-bottom-color: rgba(228, 182, 79, 0.1);
}

#toast {
  border-radius: 7px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.42);
}

@media (max-width: 760px) {
  header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .header-right {
    width: 100%;
    justify-content: space-between;
  }

  .resource-bar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .res-item,
  .troops-bar {
    min-width: 0;
  }

  .game-content {
    padding: 14px;
  }

  .village-hero {
    height: 142px;
  }

  .hut-1 { left: 8%; }
  .hut-3 { right: 8%; }
}

/* ===== Referans mobil strateji tema: parşömen + izometrik köy ===== */
:root {
  --ui-ink: #20150d;
  --ui-brown: #3a2414;
  --ui-brown-2: #5a371b;
  --ui-cream: #f3e3bf;
  --ui-cream-2: #ead2a3;
  --ui-line: #b9965e;
  --ui-green: #2f7a24;
  --ui-red: #9d1f17;
}

body {
  background: #3a2c1a;
  color: #24180e;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

body::before { display: none; }

#auth-screen {
  background:
    linear-gradient(rgba(16,12,8,.28), rgba(16,12,8,.72)),
    url("assets/village-isometric.png") center / cover no-repeat;
}

.auth-box {
  background: linear-gradient(180deg, rgba(250,237,203,.96), rgba(229,205,156,.96));
  border: 2px solid #4a2b13;
  color: var(--ui-ink);
}

.auth-box h1,
.subtitle,
.auth-form input,
.msg {
  color: var(--ui-ink);
  text-shadow: none;
}

.auth-form input {
  background: #fff3d0;
  border: 1px solid #b9965e;
}

#game-screen {
  min-height: 100vh;
  background: #3a2c1a;
}

header {
  position: sticky;
  top: 0;
  min-height: 52px;
  padding: 7px 10px;
  background: linear-gradient(180deg, #20150d, #0f0a06);
  border-bottom: 2px solid #c7a56a;
  color: #fff5d8;
  box-shadow: none;
}

.logo {
  color: #fff5d8;
  font-size: 1rem;
}

.main-nav {
  justify-content: center;
}

.nav-tab {
  background: transparent;
  border: 0;
  color: #f1dcae;
  padding: 8px 10px;
  box-shadow: none;
}

.nav-tab:hover,
.nav-tab.active {
  background: linear-gradient(180deg, #f5e6c4, #d7b879);
  color: #28180b;
  border: 1px solid #9e7b45;
  box-shadow: inset 0 -2px 0 #8f632d;
}

.player-name { color: #f3dfb0; }

.btn-logout {
  background: #ead2a3;
  border: 1px solid #9e7b45;
  color: #3a2414;
}

.resource-bar {
  position: sticky;
  top: 52px;
  z-index: 25;
  display: flex;
  gap: 0;
  padding: 0;
  background: linear-gradient(180deg, #fff0c8, #e5c88e);
  border-top: 1px solid #fff7dc;
  border-bottom: 2px solid #9d7a42;
  box-shadow: none;
}

.res-item {
  flex: 1 1 120px;
  min-width: 112px;
  padding: 7px 12px;
  border: 0;
  border-right: 1px solid #b99255;
  border-radius: 0;
  background: transparent;
}
.res-item:first-child { padding-left: 24px; }

.res-label {
  color: #6b4b25;
  font-size: .72rem;
}

.res-value {
  color: #2c1b0c;
  font-size: 1.08rem;
  font-weight: bold;
}

.res-rate {
  color: #356f24;
}

.troops-bar {
  background: rgba(63,37,15,.08);
}

.game-content {
  max-width: 1040px;
  padding: 10px;
  background: linear-gradient(180deg, #f6e8c8, #e9d0a0);
  border-left: 2px solid #4b2c13;
  border-right: 2px solid #4b2c13;
  color: #24180e;
}

.village-hero {
  height: min(64vw, 620px);
  min-height: 420px;
  margin: 0 0 10px;
  border: 2px solid #3a2414;
  border-radius: 6px;
  background: url("assets/village-isometric.png") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,244,214,.55);
}

.village-hero::after {
  background:
    linear-gradient(180deg, rgba(255,246,220,.08), rgba(0,0,0,.1)),
    radial-gradient(circle at 50% 52%, transparent 0 45%, rgba(20,10,4,.18) 76%);
  pointer-events: none;
}

.hero-sky,
.hero-hills,
.hero-wall,
.hero-huts,
.hero-fire,
.smoke {
  display: none;
}

.section-header {
  background: linear-gradient(180deg, #fff0c8, #e7c98f);
  border: 1px solid #b58c4d;
  border-radius: 4px;
  color: #24180e;
}

.village-title,
.section-title {
  color: #2a190c;
  text-shadow: none;
}

.village-coord,
.map-legend,
.empty-msg,
.b-level,
.t-count,
.atk-detail,
.vl-info .vl-owner {
  color: #6e512d;
}

.section-title {
  margin: 14px 0 0;
  padding: 9px 12px;
  background: linear-gradient(180deg, #2b1b10, #120b06);
  border: 1px solid #0b0704;
  border-radius: 5px 5px 0 0;
  color: #fff4d7;
}

.buildings-grid,
.troops-grid,
.village-list,
.construction-queue {
  gap: 0;
  background: #f4e3bd;
  border: 1px solid #b9965e;
  border-top: 0;
}

.buildings-grid,
.troops-grid {
  grid-template-columns: 1fr;
}

.building-card,
.troop-card,
.queue-item,
.attack-card,
.vl-card,
.smithy-item {
  min-height: auto;
  border: 0;
  border-bottom: 1px solid #c7a56a;
  border-radius: 0;
  background: linear-gradient(180deg, #fff2d2, #efd6a7);
  color: #24180e;
  box-shadow: none;
}

.building-card::before,
.troop-card::before,
.vl-card::before {
  display: none;
}

.building-card:hover,
.troop-card:hover,
.vl-card:hover {
  transform: none;
  border-color: transparent;
  background: #fff4d8;
}

.b-icon,
.t-icon {
  float: left;
  width: 58px;
  height: 58px;
  margin: 0 12px 8px 0;
  background: #37261a;
  border: 1px solid #5a3f28;
  border-radius: 3px;
  font-size: 2rem;
}

.b-name,
.t-name,
.vl-info .vl-name,
.atk-title {
  color: #27180b;
  font-weight: 800;
}

.b-rate,
.atk-loot,
.queue-time {
  color: #2f7a24;
}

.b-costs,
.t-stats {
  color: #4d3920;
}

.btn-primary,
.btn-upgrade.ok,
.btn-smithy.ok {
  background: linear-gradient(180deg, #4e9a31, #216015);
  border: 1px solid #18480f;
  color: #fff5d8;
}

.btn-upgrade,
.btn-secondary,
.btn-test,
.tab-btn,
.btn-smithy {
  background: linear-gradient(180deg, #5b371b, #251407);
  border: 1px solid #160c05;
  color: #fff0c8;
}

.tab-btn.active {
  background: linear-gradient(180deg, #f8e8bf, #cfaa6b);
  color: #24180e;
}

.btn-danger,
.btn-train,
.btn-attack {
  background: linear-gradient(180deg, #7c2e1f, #321007);
  border: 1px solid #220a04;
  color: #fff0c8;
}

.train-input,
.troop-inputs input[type=number] {
  background: #fff2cf;
  border: 1px solid #b9965e;
  color: #24180e;
}

.test-panel {
  background: #ead2a3;
  border: 1px dashed #8e642d;
  color: #2a190c;
}

.test-title,
.test-title span,
.premium-status {
  color: #2a190c;
}

.map-wrapper {
  position: relative;
  background: #182d12;
  border: 2px solid #2a190c;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,244,214,.25), 0 10px 20px rgba(0,0,0,.25);
}

.map-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 12px;
  align-items: start;
  padding: 10px;
  background: linear-gradient(180deg, #f5e5bf, #dfc48e);
  border: 1px solid #9d7a42;
}

#world-map {
  width: min(600px, 100%);
  display: block;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(30,80,24,.38), transparent 8%),
    radial-gradient(circle at 78% 60%, rgba(30,80,24,.32), transparent 10%),
    linear-gradient(0deg, rgba(0,0,0,.08), rgba(255,255,255,.05)),
    #486c25;
}

.map-controls {
  position: absolute;
  top: 18px;
  right: 14px;
  display: grid;
  gap: 8px;
  z-index: 5;
}

.map-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,240,200,.45);
  border-radius: 5px;
  background: rgba(35, 24, 13, .82);
  color: #fff2ce;
  font-size: 1.45rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}

.map-controls button:nth-child(n+4) {
  font-size: 1.05rem;
}

.map-side-panel {
  background: linear-gradient(180deg, #fff0c8, #e8cd96);
  border: 1px solid #9d7a42;
  color: #2a190c;
  padding: 10px;
}

.map-side-panel h3,
.map-side-panel h4 {
  margin: 0;
  color: #2a190c;
}

.map-side-panel h3 {
  padding: 6px 8px;
  background: linear-gradient(180deg, #2b1b10, #120b06);
  color: #fff4d7;
}

#mini-map {
  display: block;
  width: 100%;
  height: auto;
  margin: 8px 0 10px;
  border: 2px solid #5a371b;
  background: #506f2b;
  image-rendering: pixelated;
}

.map-panel-section {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #c7a56a;
}

.map-key {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: .85rem;
}

.key {
  width: 14px;
  height: 14px;
  display: inline-block;
  border: 1px solid #2a190c;
}

.key.own { background: #fff03d; }
.key.enemy { background: #c60000; }
.key.barbar { background: #d8d2be; }

.map-side-panel .btn-secondary {
  width: 100%;
  margin-top: 7px;
  padding: 8px;
}

.leaderboard-table {
  border: 1px solid #b9965e;
  background: #f4e3bd;
  color: #24180e;
}

.leaderboard-table th {
  background: linear-gradient(180deg, #2b1b10, #120b06);
  color: #fff4d7;
}

.leaderboard-table td {
  border-bottom-color: #c7a56a;
}

/* ── Sıralama: mod sekmeleri + sayfalama ── */
.lb-mode-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.lb-mode-btn { padding: 8px 16px; background: #2b1b10; color: #c0a060; border: 1px solid #4a3010; border-radius: 6px; cursor: pointer; font-size: .88rem; font-weight: 700; }
.lb-mode-btn:hover { background: #3a2415; }
.lb-mode-btn.active { background: linear-gradient(180deg, #c7912f, #8a5c12); color: #2a1608; border-color: #ecc878; }
.lb-no-clan { color: #6b5a3e; }

.lb-pagination { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 16px; }
.lb-page-btn { padding: 6px 12px; background: #2b1b10; color: #c0a060; border: 1px solid #4a3010; border-radius: 4px; cursor: pointer; font-size: .85rem; }
.lb-page-btn:hover { background: #3a2415; }
.lb-page-btn.active { background: linear-gradient(180deg, #c7912f, #8a5c12); color: #2a1608; border-color: #ecc878; font-weight: 700; }
.lb-page-dots { color: #6b5a3e; padding: 6px 4px; }

/* Yardim kilavuzu */
.help-guide {
  max-width: 1180px;
}

.building-help-content {
  color: #2a190c;
}

.help-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fff0c8, #e8cd96);
  border: 1px solid #b9965e;
  border-radius: 6px;
}

.main-level-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  width: fit-content;
  padding: 6px 8px;
  background: #f7e3b8;
  border: 1px solid #b9965e;
  border-radius: 5px;
  color: #2a190c;
  font-size: .84rem;
  font-weight: 700;
}

.main-level-select select {
  min-width: 58px;
  padding: 4px 6px;
  border: 1px solid #9d7a42;
  border-radius: 4px;
  background: #fff7dd;
  color: #24180e;
  font-weight: 700;
}

.help-summary b {
  font-size: 1rem;
}

.help-summary span {
  color: #5c3c1a;
  font-size: .88rem;
}

.help-building-list {
  display: grid;
  gap: 12px;
}

.help-building-card {
  background: #f4e3bd;
  border: 1px solid #b9965e;
  border-radius: 6px;
  overflow: hidden;
}

.help-building-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr);
  gap: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #fff0c8, #e9d09a);
  border-bottom: 1px solid #c7a56a;
}

.help-building-head h3 {
  margin: 0 0 5px;
  color: #2a190c;
  font-size: 1.05rem;
}

.help-building-head p {
  margin: 0;
  color: #4e3217;
  line-height: 1.35;
}

.help-building-meta {
  display: grid;
  gap: 6px;
  align-content: start;
  font-size: .86rem;
  color: #4e3217;
}

.help-table-wrap {
  overflow-x: auto;
}

.help-level-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  table-layout: fixed;
}

.help-level-table th {
  background: linear-gradient(180deg, #2b1b10, #120b06);
  color: #fff4d7;
  padding: 8px 7px;
  font-size: .78rem;
  text-align: left;
}

.help-level-table td {
  padding: 7px;
  border-bottom: 1px solid #d2b77b;
  font-size: .82rem;
  white-space: nowrap;
}

.help-level-table tr:nth-child(even) td {
  background: rgba(255, 244, 215, .42);
}

@media (max-width: 760px) {
  .help-summary,
  .help-building-head {
    grid-template-columns: 1fr;
    display: grid;
  }
}

/* KS HEADER CLEANUP V7 */
header .logo {
  display: none !important;
}

header .main-nav .nav-tab[data-tab="village"],
header .main-nav .nav-tab[data-tab="map"] {
  display: none !important;
}

.quick-menu button.quick-test {
  display: none !important;
}

.quick-menu button[onclick="showTab('premium')"] {
  display: none !important;
}

header .main-nav {
  justify-content: center !important;
}

/* Login form alani: hazir gorseldeki eski yazi/form izlerini kapatir. */
#auth-screen .auth-box {
  width: min(328px, 88vw) !important;
  padding: 14px 12px 14px !important;
  background: linear-gradient(180deg, rgba(10, 6, 4, .99), rgba(22, 13, 7, .99)) !important;
  position: absolute !important;
  z-index: 2 !important;
}

#auth-screen .auth-box::before {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: -64px;
  bottom: -22px;
  z-index: -1;
  border: 1px solid rgba(207, 165, 75, .7);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 5, 3, .995), rgba(22, 13, 7, .985));
  box-shadow:
    0 14px 30px rgba(0, 0, 0, .72),
    inset 0 0 0 1px rgba(255, 225, 150, .08);
}

#auth-screen .tab-buttons {
  margin-top: 0 !important;
}

#auth-screen .auth-form input {
  height: 40px !important;
}

#auth-screen .btn-primary {
  height: 44px !important;
}

.queue-order-actions {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 7px;
}

.queue-order-btn {
  width: 26px;
  height: 22px;
  padding: 0;
  border: 1px solid #8a5b1d;
  border-radius: 4px;
  background: linear-gradient(180deg, #7d4f18, #3b2109);
  color: #fff0c5;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.queue-order-btn:hover:not(:disabled) {
  filter: brightness(1.18);
}

.queue-order-btn:disabled {
  opacity: .35;
  cursor: default;
}

/* KS CENTER SHELL V6: breadcrumb okunurlugu, kutulu kaynaklar ve login form kapatici */
.village-nav-bar {
  width: 41% !important;
  background: linear-gradient(180deg, #fff7dd 0%, #f0d29a 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, .75) !important;
  border-bottom: 1px solid #a87935 !important;
  color: #7a2b05 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(255, 244, 210, .85) !important;
}

.village-nav-bar a,
.village-nav-bar span,
.village-nav-bar strong,
.village-nav-bar button {
  color: #7a2b05 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

.village-nav-bar .vnav-arrow,
.village-nav-bar button {
  min-width: 25px !important;
  height: 25px !important;
  border: 1px solid #8a5b1d !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #7d4f18, #3b2109) !important;
  color: #fff0c5 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.resource-bar {
  width: 59% !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 3px 8px 3px 0 !important;
  background: linear-gradient(180deg, #fff7dd 0%, #f0d29a 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, .75) !important;
  border-bottom: 1px solid #a87935 !important;
}

.resource-bar .res-item {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 6px !important;
  border: 1px solid rgba(150, 103, 38, .58) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, rgba(255, 248, 224, .92), rgba(224, 188, 112, .88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}

.resource-bar .res-value {
  font-size: .76rem !important;
  color: #251204 !important;
}

#auth-screen .auth-box {
  width: min(304px, 84vw) !important;
  padding: 10px 10px 12px !important;
  background: linear-gradient(180deg, rgba(13, 8, 5, .99), rgba(24, 14, 7, .98)) !important;
  border: 1px solid rgba(207, 165, 75, .78) !important;
  border-radius: 6px !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .64),
    inset 0 0 0 1px rgba(255, 225, 150, .08) !important;
}

#auth-screen .tab-buttons {
  margin: 0 0 9px 0 !important;
}

#auth-screen .auth-form input {
  margin-bottom: 8px !important;
}

#auth-screen .btn-primary {
  margin-top: 2px !important;
}

@media (max-width: 760px) {
  .village-nav-bar,
  .resource-bar {
    width: 100% !important;
  }

  .resource-bar .res-item {
    min-width: auto !important;
  }
}

.modal-box {
  background: linear-gradient(180deg, #fff0c8, #e7c98f);
  border: 2px solid #3a2414;
  color: #24180e;
}

.modal-box h2 {
  color: #24180e;
  text-shadow: none;
}

.modal-target {
  background: #f7e3b8;
  color: #3a2414;
  border: 1px solid #b9965e;
}

#toast {
  background: #2f7a24;
  border-color: #18480f;
  color: #fff5d8;
}

@media (max-width: 760px) {
  header {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
  }

  .main-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .nav-tab {
    white-space: nowrap;
    font-size: .78rem;
  }

  .header-right {
    width: auto;
  }

  .resource-bar {
    position: sticky;
    top: 52px;
    display: flex;
    overflow-x: auto;
  }

  .resource-bar .res-item {
    flex: 0 0 112px;
  }

  .game-content {
    padding: 6px;
    border-left: 0;
    border-right: 0;
  }

  .village-hero {
    height: 430px;
    min-height: 430px;
  }
}

/* ===== Tiklanabilir koy binalari ===== */
.village-hotspot {
  position: absolute;
  z-index: 12;
  transform: translate(-50%, -50%);
  min-width: 68px;
  padding: 3px 6px 4px;
  border: 1px solid rgba(42, 25, 12, .75);
  border-radius: 4px;
  background: rgba(42, 25, 12, .82);
  color: #fff4d7;
  font-size: .68rem;
  line-height: 1.05;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.4), 0 6px 12px rgba(0,0,0,.22);
}

.village-hotspot b,
.village-hotspot span {
  display: block;
}

.village-hotspot b {
  font-size: .88rem;
}

.mini-test {
  margin: 4px 4px 0 0;
  padding: 6px 9px;
  font-size: .74rem;
}

.mini-test span {
  display: inline-block;
  margin-right: 5px;
  padding: 1px 4px;
  border-radius: 3px;
  background: #fff1b8;
  color: #6a2f0d;
  font-size: .62rem;
}

.training-queue-mini {
  display: grid;
  gap: 5px;
  margin: 6px 0 10px;
  padding: 7px;
  border: 1px solid #c8a465;
  background: #f8e8c4;
}

.training-queue-mini div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: .78rem;
}

.t-icon,
.building-troop-icon {
  font-size: 1.9rem;
}

.village-hotspot:hover {
  background: linear-gradient(180deg, #fff0c8, #d7b879);
  color: #24180e;
}

.village-hotspot:focus-visible {
  outline: 3px solid #ffd35b;
  outline-offset: 2px;
}

.hs-main { left: 50%; top: 36%; }
.hs-palace { left: 46%; top: 24%; }
.hs-barracks { left: 27%; top: 44%; }
.hs-stable { left: 72%; top: 43%; }
.hs-workshop { left: 50%; top: 58%; }
.hs-smithy { left: 70%; top: 68%; }
.hs-woodcutter { left: 28%; top: 70%; }
.hs-quarry { left: 45%; top: 80%; }
.hs-iron { left: 78%; top: 79%; }
.hs-farm { left: 55%; top: 72%; }
.hs-market { left: 37%; top: 61%; }
.hs-watchtower { left: 76%; top: 30%; }
.hs-storage { left: 59%; top: 55%; }
.hs-hidden { left: 42%; top: 50%; }
.hs-wall { left: 19%; top: 82%; }

.building-modal-box {
  width: min(720px, 96vw);
  max-height: 90vh;
  overflow: auto;
}

.building-modal-content {
  margin-top: 12px;
}

.building-entry {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  padding: 12px;
  background: #f7e3b8;
  border: 1px solid #b9965e;
}

.building-entry-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: #37261a;
  border: 1px solid #5a3f28;
  border-radius: 4px;
  font-size: 2rem;
}

.building-entry-name {
  font-weight: 800;
  font-size: 1.1rem;
}

.building-entry-level {
  margin-top: 2px;
  color: #6e512d;
}

.building-entry-lines {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  color: #3e2a17;
}

.building-upgrade-box {
  display: grid;
  grid-template-columns: 1fr minmax(160px, 220px);
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: #ead2a3;
  border: 1px solid #b9965e;
  border-top: 0;
}

.building-costs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: #3e2a17;
  font-weight: 700;
}

.building-action-panel {
  margin-top: 12px;
  padding: 12px;
  background: #fff0c8;
  border: 1px solid #b9965e;
}

.building-action-panel h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.palace-panel {
  display: grid;
  gap: 12px;
}

.palace-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.palace-tabs button {
  padding: 8px 10px;
  border: 1px solid #9d7a42;
  border-radius: 5px;
  background: #ead2a3;
  color: #2a190c;
  cursor: pointer;
  font-weight: 700;
}

.palace-tabs button.active {
  background: linear-gradient(180deg, #2b1b10, #120b06);
  color: #fff4d7;
}

.palace-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.palace-stat {
  padding: 10px;
  background: #f7e3b8;
  border: 1px solid #c7a56a;
  border-radius: 5px;
  display: grid;
  gap: 4px;
}

.palace-stat span,
.palace-row p,
.palace-help p {
  color: #5c3c1a;
}

.palace-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: #f7e3b8;
  border: 1px solid #c7a56a;
  border-radius: 5px;
}

.palace-costs,
.palace-mint {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.palace-costs span {
  padding: 5px 8px;
  background: #fff0c8;
  border: 1px solid #d2b77b;
  border-radius: 4px;
  font-weight: 700;
}

.palace-mint input {
  width: 110px;
  padding: 8px;
  border: 1px solid #9d7a42;
  border-radius: 4px;
  background: #fff7dd;
  color: #24180e;
  font-weight: 700;
}

.palace-help {
  display: grid;
  gap: 7px;
  padding: 12px;
  background: #f7e3b8;
  border: 1px solid #c7a56a;
  border-radius: 5px;
}

.divan-layout {
  display: grid;
  gap: 6px;
  font-size: .86rem;
}

.divan-section-title {
  padding: 6px 8px;
  background: linear-gradient(180deg, #9a320c, #5a1704);
  color: #fff4d7;
  border: 1px solid #6f2608;
  border-radius: 4px 4px 0 0;
  font-weight: 800;
}

.divan-table {
  width: 100%;
  border-collapse: collapse;
  background: #f8e6bd;
  color: #2a190c;
  border: 1px solid #bc965b;
  margin-top: -6px;
}

.divan-table th,
.divan-table td {
  padding: 5px 7px;
  border-bottom: 1px solid #cdb077;
  text-align: left;
  vertical-align: middle;
}

.divan-table th {
  width: 34%;
  color: #3f220d;
  font-weight: 800;
  background: rgba(255, 244, 215, .45);
}

.divan-table td {
  font-weight: 600;
}

.divan-table td b {
  color: #7b2108;
}

.divan-status-table td {
  color: #8a160b;
  font-weight: 800;
}

.divan-action {
  justify-self: end;
  min-width: 116px;
  padding: 7px 12px;
  border: 1px solid #6f2608;
  border-radius: 5px;
  background: linear-gradient(180deg, #8c4218, #4a210d);
  color: #fff4d7;
  font-weight: 800;
  cursor: pointer;
}

.divan-action:disabled {
  opacity: .55;
  cursor: default;
}

.divan-buy-row {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.divan-buy-row input {
  width: 88px;
  padding: 6px;
  border: 1px solid #9d7a42;
  border-radius: 4px;
  background: #fff7dd;
  color: #24180e;
  font-weight: 800;
}

.divan-help {
  margin-top: -6px;
  padding: 8px 10px;
  background: #f8e6bd;
  border: 1px solid #bc965b;
  color: #3f220d;
}

.divan-help p {
  margin: 4px 0;
  line-height: 1.3;
}

.res-red {
  color: #b31313;
  font-weight: 900;
}

.building-level-info-panel {
  margin-top: 12px;
}

.building-level-toggle {
  width: 100%;
  padding: 10px 12px;
  font-weight: 700;
}

.building-level-info {
  margin-top: 10px;
  background: #ead19b;
  border: 1px solid #8f6831;
  border-radius: 4px;
  overflow: hidden;
}

.building-detail-sheet {
  padding: 10px;
  color: #2b1a0d;
  background:
    linear-gradient(rgba(255, 249, 222, .82), rgba(236, 207, 143, .9)),
    repeating-linear-gradient(90deg, rgba(112, 78, 33, .06) 0 1px, transparent 1px 18px);
}

.detail-sheet-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  color: #3b220d;
}

.detail-sheet-title > span {
  height: 1px;
  background: linear-gradient(90deg, transparent, #8a642d, transparent);
}

.detail-sheet-title b {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
  text-transform: uppercase;
}

.detail-sheet-title small {
  display: block;
  font-size: .72rem;
  color: #6d4a1e;
  margin-top: 2px;
}

.detail-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(170px, .8fr) minmax(130px, .55fr);
  gap: 8px;
  margin-bottom: 8px;
}

.detail-name-card,
.detail-visual-card,
.detail-rule-card,
.detail-mini-table {
  border: 1px solid #b99054;
  background: rgba(255, 242, 202, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.detail-name-card {
  padding: 10px;
}

.detail-name-card h3 {
  margin: 0 0 4px;
  font-size: 1.18rem;
  color: #2b1608;
}

.detail-name-card p {
  margin: 0 0 8px;
  line-height: 1.32;
  color: #573719;
  font-size: .86rem;
}

.detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #d2b77b;
  border-left: 1px solid #d2b77b;
}

.detail-stat-grid span {
  display: grid;
  gap: 3px;
  min-height: 44px;
  padding: 6px;
  place-items: center;
  text-align: center;
  border-right: 1px solid #d2b77b;
  border-bottom: 1px solid #d2b77b;
  font-weight: 800;
}

.detail-stat-grid b {
  font-size: .67rem;
  color: #5a3917;
}

.detail-visual-card,
.detail-rule-card {
  padding: 8px;
  display: grid;
  align-content: start;
  gap: 6px;
  text-align: center;
}

.detail-building-art {
  min-height: 94px;
  display: grid;
  place-items: center;
  border: 1px solid #d2b77b;
  background:
    linear-gradient(rgba(61, 86, 39, .18), rgba(241, 215, 153, .18)),
    url("/assets/village-isometric.png") center / cover;
}

.detail-building-art span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(48, 27, 10, .78);
  color: #fff2ce;
  font-size: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.detail-tier-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.detail-tier-row em {
  padding: 3px 2px;
  background: #f7e7bd;
  border: 1px solid #d1ad6f;
  font-style: normal;
  font-size: .62rem;
  color: #5b3b17;
}

.detail-rule-card strong {
  font-size: 1.55rem;
  color: #7d2c0b;
}

.detail-rule-card small,
.detail-rule-card span {
  color: #5b3b17;
  font-size: .76rem;
}

.detail-main-select-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.detail-table-grid {
  display: grid;
  grid-template-columns: 1.45fr .75fr .9fr 1.2fr;
  gap: 8px;
  align-items: start;
}

.detail-mini-table h4 {
  margin: 0;
  padding: 7px 8px;
  color: #3d220d;
  text-align: center;
  font-size: .86rem;
  background: linear-gradient(180deg, #ead09b, #d4ad64);
  border-bottom: 1px solid #ad8445;
}

.detail-mini-scroll {
  max-height: 276px;
  overflow: auto;
}

.detail-mini-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.detail-mini-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 5px;
  background: #fff3d1;
  border-bottom: 1px solid #b99054;
  color: #3d220d;
  font-size: .72rem;
  text-align: center;
}

.detail-mini-table td {
  padding: 5px 5px;
  border-bottom: 1px solid #d5b775;
  border-right: 1px solid #e1c98f;
  color: #27160a;
  font-size: .76rem;
  text-align: center;
}

.detail-mini-table td:last-child,
.detail-mini-table th:last-child {
  border-right: 0;
}

.detail-mini-table tr:nth-child(even) td {
  background: rgba(255, 248, 224, .5);
}

.detail-mini-table .current-level-row td {
  background: #f4cd76;
  font-weight: 900;
}

@media (max-width: 900px) {
  .detail-summary-grid,
  .detail-table-grid {
    grid-template-columns: 1fr;
  }

  .detail-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-main-select-row {
    justify-content: stretch;
  }
}

.building-troop-row {
  display: grid;
  grid-template-columns: 52px 1fr 128px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #d2b37a;
}

.building-troop-row:first-of-type {
  border-top: 0;
}

.watchtower-info {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.watchtower-info div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #c39b5e;
  background: #f6e4b8;
  color: #2a190c;
}

.watchtower-info b {
  color: #6b260d;
}

.building-troop-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: #37261a;
  border: 1px solid #5a3f28;
  border-radius: 4px;
  font-size: 1.65rem;
}

.building-troop-main {
  display: grid;
  gap: 3px;
}

.building-troop-main span,
.building-troop-main em {
  color: #6e512d;
  font-size: .82rem;
}

.building-troop-cost {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .78rem;
  color: #3e2a17;
}

.building-troop-actions {
  display: grid;
  gap: 6px;
}

.building-troop-actions .train-input {
  width: 100%;
}

#tab-map .game-content {
  background: #3a2c1a;
  border: 0;
}

#tab-map .section-title {
  margin-top: 0;
}

#tab-map .map-legend {
  padding: 8px 10px;
  margin: 0;
  background: linear-gradient(180deg, #fff0c8, #e5c88e);
  border: 1px solid #9d7a42;
  border-bottom: 0;
  color: #3a2414;
}

#tab-map .map-wrapper {
  margin-bottom: 0;
}

#tab-map .village-list {
  margin-top: 10px;
  border: 1px solid #9d7a42;
  background: #ead2a3;
}

#tab-map .vl-card {
  position: relative;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fff2d2, #efd6a7);
}

#tab-map .vl-card.own {
  background: linear-gradient(180deg, #fff6d8, #e9cd7e);
}

#tab-map .vl-card.barbar {
  background: linear-gradient(180deg, #f1ead9, #d2c2a1);
}

#tab-map .game-content {
  padding: 0;
  background: #2a1f12;
}

#tab-map .section-title {
  padding: 10px 14px;
  margin: 0;
  background: linear-gradient(180deg, #20150b, #0f0904);
  border-bottom: 2px solid #c7a56a;
  color: #fff0c6;
}

#tab-map .map-board {
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 10px;
  padding: 8px;
  background: linear-gradient(180deg, #f7e8c4, #dfc18a);
  border: 1px solid #a47b3f;
}

#tab-map .map-wrapper {
  border: 2px solid #24170b;
  border-radius: 4px;
  background: #203814;
}

#world-map {
  width: 100%;
  max-width: none;
  aspect-ratio: 19 / 14;
  image-rendering: auto;
  display: block;
}

.world-map-surface {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  cursor: grab;
  background:
    linear-gradient(rgba(18, 35, 10, .18), rgba(18, 35, 10, .08)),
    url("assets/world-map-bg-v2.png") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 214, .22);
}

.world-map-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(28, 52, 15, .38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 52, 15, .38) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.world-map-surface.dragging {
  cursor: grabbing;
}

.world-map-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 38px rgba(0, 0, 0, .32);
  pointer-events: none;
}

.map-coordinate-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: rgba(255, 241, 202, .9);
  font-size: .72rem;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
}

.map-tile-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.map-tile {
  position: absolute;
  display: block;
  border-right: 1px solid rgba(29, 55, 17, .16);
  border-bottom: 1px solid rgba(29, 55, 17, .16);
}

.map-tile .tile-grass,
.map-tile .tile-forest,
.map-tile .tile-water {
  position: absolute;
  inset: 0;
  display: block;
}

.map-tile .tile-forest::before,
.map-tile .tile-forest::after {
  content: "";
  position: absolute;
  width: 36%;
  height: 42%;
  border-radius: 50%;
  background: #1f5d28;
  box-shadow: 9px 3px 0 #2f7630, 17px 8px 0 #244c19;
}

.map-tile .tile-forest::before { left: 18%; top: 18%; }
.map-tile .tile-forest::after { left: 40%; top: 36%; transform: scale(.8); }

.map-tile .tile-water {
  border-radius: 45%;
  transform: scale(.72);
  background: radial-gradient(circle at 50% 45%, #4f8e8e, #1f5d66 70%);
  opacity: .78;
}

.map-tile .tile-grass::before {
  content: "";
  position: absolute;
  left: 28%;
  top: 30%;
  width: 36%;
  height: 22%;
  border-radius: 50%;
  background: rgba(231, 208, 93, .14);
}

.map-coord-x,
.map-coord-y {
  position: absolute;
}

.map-coord-x {
  top: 6px;
  transform: translateX(-50%);
}

.map-coord-y {
  left: 7px;
  transform: translateY(-50%);
}

.map-village-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.map-village-marker {
  position: absolute;
  width: 58px;
  height: 46px;
  transform: translate(-50%, -100%);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.42));
}

.map-village-marker.selected {
  z-index: 8;
}

.map-village-marker.selected::after {
  content: "";
  position: absolute;
  inset: -6px -8px -5px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #2b1608, 0 0 12px rgba(255,255,255,.75);
}

.map-village-dot {
  position: absolute;
  right: 4px;
  top: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #2a1608;
  background: #b00000;
  z-index: 5;
}

.map-village-marker.current .map-village-dot { background: #fff; }
.map-village-marker.own .map-village-dot { background: #fff200; }
.map-village-marker.barbar .map-village-dot { background: #a9a38f; }
.map-village-marker.other .map-village-dot { background: #b00000; }
.map-village-marker.enemy .map-village-dot { background: #ff2b22; }
.map-village-marker.ally .map-village-dot { background: #23a8d5; }
.map-village-marker.tribe .map-village-dot { background: #1538ff; }
.map-village-marker.pact .map-village-dot { background: #8b008b; }

.map-village-reserve-flag {
  position: absolute;
  left: 2px;
  top: -6px;
  font-size: 13px;
  z-index: 6;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

.map-village-icon {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.map-village-marker.barbar .map-village-icon {
  filter: grayscale(.55) saturate(.72) brightness(.88);
}

.map-village-marker.other .map-village-icon,
.map-village-marker.enemy .map-village-icon {
  filter: saturate(.88) brightness(.94);
}

.map-village-marker.current {
  transform: translate(-50%, -100%) scale(1.18);
}

.map-side-panel {
  min-height: 100%;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
}

.selected-map-village {
  min-height: 176px;
  padding: 10px;
  border: 1px solid #c7a56a;
  border-top: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.25), transparent 34px),
    #fff0c8;
}

.selected-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: #6b4b24;
  font-weight: 800;
}

.selected-village-head {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid #d2b77b;
}

.selected-village-head b,
.selected-village-head small {
  display: block;
}

.selected-village-head b {
  color: #2b1608;
  font-size: 1rem;
}

.selected-village-head small {
  color: #68461f;
  margin-top: 2px;
}

.selected-village-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid #d2b77b;
  border-left: 1px solid #d2b77b;
  margin-bottom: 10px;
}

.selected-village-stats span {
  display: grid;
  gap: 3px;
  padding: 7px;
  border-right: 1px solid #d2b77b;
  border-bottom: 1px solid #d2b77b;
  color: #2a190c;
  font-weight: 800;
}

.selected-village-stats b {
  color: #6b4b24;
  font-size: .72rem;
}

.selected-village-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.map-action {
  min-height: 34px;
  border: 1px solid #5f3514;
  border-radius: 4px;
  color: #fff0c6;
  font-weight: 900;
  cursor: pointer;
}

.map-action:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.map-action.attack { background: linear-gradient(180deg, #8f240e, #4b1007); }
.map-action.support { background: linear-gradient(180deg, #245d1c, #123b0e); }

.map-legend-table {
  grid-column: 1 / -1;
  border: 1px solid #c7a56a;
  background: #f5e4b9;
  color: #2c1a0c;
  font-size: .82rem;
}

.legend-row {
  display: grid;
  grid-template-columns: 90px repeat(4, minmax(140px, 1fr));
  min-height: 26px;
  border-bottom: 1px solid #d5bb83;
}

.legend-row:last-child {
  border-bottom: 0;
}

.legend-row b,
.legend-row span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-right: 1px solid #d5bb83;
}

.map-swatch {
  width: 14px;
  height: 14px;
  display: inline-block;
  flex: 0 0 14px;
  border: 1px solid #2a190c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.map-swatch.current { background: #ffffff; }
.map-swatch.own { background: #fff200; }
.map-swatch.barbar { background: #a9a38f; }
.map-swatch.other { background: #b00000; }
.map-swatch.tribe { background: #1538ff; }
.map-swatch.ally { background: #23a8d5; }
.map-swatch.pact { background: #8b008b; }
.map-swatch.enemy { background: #ff2b22; }

#tab-map .village-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  margin: 0 10px 10px;
  max-height: 260px;
  overflow: auto;
}

#tab-map .vl-card {
  border: 1px solid #c7a56a;
  border-top: 0;
  border-radius: 0;
}

#tab-map .vl-card.selected {
  outline: 2px solid #fff;
  z-index: 1;
}

#tab-map .vl-name {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mini-map-surface {
  position: relative;
  width: 100%;
  height: 190px;
  margin: 8px 0 10px;
  border: 2px solid #5a371b;
  background:
    linear-gradient(rgba(40, 70, 22, .42), rgba(40, 70, 22, .42)),
    url("assets/world-map-bg-v2.png") center / cover no-repeat;
  overflow: hidden;
}

.mini-map-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(20,35,12,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,35,12,.35) 1px, transparent 1px);
  background-size: 20% 20%;
}

.mini-map-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid #1d1006;
  transform: translate(-50%, -50%);
  background: #b00000;
  z-index: 2;
}

.mini-map-dot.current { background: #fff; }
.mini-map-dot.own { background: #fff200; }
.mini-map-dot.barbar { background: #a9a38f; }
.mini-map-dot.other { background: #b00000; }
.mini-map-dot.enemy { background: #ff2b22; }
.mini-map-dot.ally { background: #23a8d5; }
.mini-map-dot.tribe { background: #1538ff; }
.mini-map-dot.pact { background: #8b008b; }

.mini-map-view {
  position: absolute;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
  background: rgba(255, 255, 255, .08);
  z-index: 3;
}

/* Ust segment son tema katmani */
.quick-menu {
  display: flex;
  gap: 0;
  overflow-x: auto;
  background: linear-gradient(180deg, #2b261a, #171108);
  border-bottom: 2px solid #c7a56a;
  padding: 7px 10px 6px;
}

.quick-menu button {
  flex: 0 0 86px;
  min-height: 60px;
  border: 0;
  border-right: 1px solid rgba(255, 232, 180, .14);
  background: transparent;
  color: #f8e3b0;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 3px;
  font-size: .74rem;
}

.quick-menu button:hover {
  background: rgba(255, 232, 180, .12);
}

.quick-menu span {
  font-size: 1.35rem;
  line-height: 1;
}

.quick-menu b {
  font-weight: 700;
  line-height: 1.05;
}

@media (max-width: 760px) {
  .village-hotspot {
    min-width: 66px;
    padding: 4px 5px;
    font-size: .65rem;
  }

  .village-hotspot b {
    font-size: .86rem;
  }

  .building-upgrade-box,
  .building-troop-row {
    grid-template-columns: 1fr;
  }

  .building-entry {
    grid-template-columns: 56px 1fr;
  }

  .building-entry-icon {
    width: 52px;
    height: 52px;
  }

  .map-board {
    grid-template-columns: 1fr;
    padding: 6px;
  }

  .map-side-panel {
    order: 2;
  }

  .map-controls button {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 900px) {
  .construction-row-head {
    display: none;
  }

  .construction-row {
    grid-template-columns: 1fr;
    gap: 5px;
    align-items: stretch;
  }

  .construction-row-action .btn-upgrade {
    width: 100%;
  }
}

/* Kompakt koy plani: tek parca gorseli duvar icine sigdirir, tiklama noktalarini kucultur. */
.village-hero {
  width: min(100%, 1060px);
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  margin: 0 auto 10px;
  background-color: #171008;
  background-image:
    radial-gradient(circle at 50% 54%, rgba(92, 126, 45, .22), transparent 43%),
    url("assets/village-isometric.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.village-hotspot {
  z-index: 40;
  min-width: 62px;
  max-width: 88px;
  padding: 3px 5px 4px;
  border: 1px solid rgba(255, 232, 170, .45);
  border-radius: 4px;
  font-size: .64rem;
  line-height: 1.02;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(58, 34, 14, .92), rgba(28, 15, 6, .92));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .38);
}

.village-hotspot b {
  font-size: .82rem;
  line-height: 1;
}

.village-hotspot span {
  white-space: normal;
}

.hs-palace { left: 50%; top: 29%; }
.hs-main { left: 50%; top: 39%; }
.hs-barracks { left: 33%; top: 45%; }
.hs-stable { left: 67%; top: 45%; }
.hs-hidden { left: 42%; top: 49%; }
.hs-storage { left: 58%; top: 52%; }
.hs-workshop { left: 49%; top: 56%; }
.hs-market { left: 38%; top: 58%; }
.hs-watchtower { left: 76%; top: 32%; }
.hs-smithy { left: 64%; top: 61%; }
.hs-farm { left: 55%; top: 66%; }
.hs-woodcutter { left: 31%; top: 67%; }
.hs-quarry { left: 46%; top: 73%; }
.hs-iron { left: 68%; top: 73%; }
.hs-wall { left: 24%; top: 80%; }

@media (max-width: 760px) {
  .village-hero {
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .village-hotspot {
    min-width: 52px;
    max-width: 72px;
    padding: 2px 4px;
    font-size: .54rem;
  }

  .village-hotspot b {
    font-size: .68rem;
  }
}

/* Harita gorsel katmani v56 */
#tab-map .map-board {
  background:
    linear-gradient(180deg, rgba(95, 55, 22, .25), rgba(50, 27, 10, .18)),
    #d8b776;
  border: 4px solid #2b1609;
  box-shadow: 0 0 0 1px #ba8f44 inset, 0 8px 22px rgba(0, 0, 0, .38);
}

#tab-map .map-wrapper {
  border: 4px solid #2b1609;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.05), transparent 12%),
    radial-gradient(circle at 80% 60%, rgba(0,0,0,0.08), transparent 18%),
    linear-gradient(135deg, #4f6f2f 0%, #5f7f35 45%, #476428 100%);
  box-shadow:
    inset 0 0 35px rgba(0,0,0,0.45),
    0 0 12px rgba(0,0,0,0.7);
}

.world-map-surface {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .06), transparent 11%),
    radial-gradient(circle at 82% 60%, rgba(0, 0, 0, .12), transparent 19%),
    radial-gradient(circle at 34% 72%, rgba(225, 204, 90, .08) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 28%, rgba(27, 48, 17, .18) 0 1px, transparent 3px),
    linear-gradient(135deg, rgba(79,111,47,.88) 0%, rgba(95,127,53,.82) 45%, rgba(71,100,40,.9) 100%),
    url("assets/world-map-bg-v2.png") center / cover no-repeat;
  border: 0;
  box-shadow:
    inset 0 0 35px rgba(0,0,0,0.45),
    0 0 12px rgba(0,0,0,0.7);
}

.world-map-surface::before {
  background-image:
    linear-gradient(rgba(0,0,0,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.14) 1px, transparent 1px);
  opacity: .18;
  mix-blend-mode: multiply;
}

.map-tile {
  border-right-color: rgba(0,0,0,0.14);
  border-bottom-color: rgba(0,0,0,0.14);
}

.map-tile .tile-grass {
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.08) 1px, transparent 2px),
    radial-gradient(circle at 74% 62%, rgba(24,44,15,0.18) 1px, transparent 3px),
    linear-gradient(135deg, rgba(82,111,49,.38), rgba(64,92,39,.32));
}

.map-tile .tile-grass.g1 {
  background:
    radial-gradient(circle at 38% 70%, rgba(241,223,130,.08) 1px, transparent 3px),
    linear-gradient(135deg, rgba(92,125,54,.34), rgba(70,101,43,.28));
}

.map-tile .tile-grass.g2 {
  background:
    radial-gradient(circle at 58% 28%, rgba(255,255,255,.06) 1px, transparent 2px),
    linear-gradient(135deg, rgba(67,103,45,.34), rgba(55,83,35,.3));
}

.map-tile .tile-grass.g3 {
  background:
    radial-gradient(circle at 22% 48%, rgba(30,58,20,.2) 1px, transparent 3px),
    linear-gradient(135deg, rgba(89,119,50,.26), rgba(60,91,36,.34));
}

.map-tile .tile-grass::before {
  background:
    radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 2px);
  width: 100%;
  height: 100%;
  inset: 0;
  border-radius: 0;
}

.map-tile .tile-forest {
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.45));
}

.map-tile .tile-forest::before,
.map-tile .tile-forest::after {
  width: 24%;
  height: 27%;
  border-radius: 50%;
  background: #214a20;
  box-shadow:
    -12px 8px 0 #2d5a27,
    10px 8px 0 #1f3f1e,
    0 18px 0 #2a5222,
    14px -5px 0 #315f2b,
    -3px 25px 0 3px rgba(59,42,18,.72);
}

.map-tile .tile-forest::before {
  left: 32%;
  top: 21%;
}

.map-tile .tile-forest::after {
  left: 52%;
  top: 43%;
  transform: scale(.82);
  opacity: .95;
}

.map-tile .tile-water {
  inset: 12% 8%;
  border-radius: 45% 55% 50% 50%;
  transform: rotate(-8deg);
  background:
    radial-gradient(circle at 45% 40%, #5fb6d0 0%, #3f8fb0 45%, #245d78 100%);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.35),
    0 2px 3px rgba(0,0,0,.24);
  opacity: .9;
}

.map-tile .tile-water::after {
  content: "";
  position: absolute;
  left: 24%;
  top: 34%;
  width: 52%;
  height: 18%;
  border-top: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  transform: rotate(8deg);
}

.map-village-marker {
  filter: drop-shadow(2px 6px 4px rgba(0,0,0,0.65));
}

.map-village-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 54%;
  height: 24%;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  transform: translateX(-50%);
  z-index: 1;
}

.map-village-marker.selected::after {
  inset: -10px -13px -8px;
  border: 3px solid #f2d36b;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(70,35,10,0.8),
    0 0 12px rgba(255,220,100,0.9);
  z-index: 2;
}

.map-village-icon {
  transform: none;
  transform-origin: center bottom;
  filter: drop-shadow(2px 4px 3px rgba(0,0,0,0.65));
  image-rendering: auto;
  z-index: 4;
}

.map-village-dot {
  right: -10px;
  top: -12px;
  width: 12px;
  height: 12px;
  border: 2px solid #1b0c04;
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
  z-index: 6;
}

.map-side-panel {
  background: linear-gradient(180deg, #f3e1b1, #d9bd79);
  border: 3px solid #3a1c0a;
  box-shadow:
    inset 0 0 18px rgba(90,45,10,0.28),
    0 0 10px rgba(0,0,0,0.55);
  color: #2b1609;
}

.map-side-panel h3,
.map-side-panel h4 {
  background: linear-gradient(180deg, #3a1c0a, #1b0c04);
  color: #f6d98a;
  border-bottom: 2px solid #b88a38;
  padding: 8px 12px;
  font-family: Georgia, serif;
}

.selected-map-village {
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.24), transparent 24%),
    linear-gradient(180deg, #f3e1b1, #d9bd79);
  border-color: #7c5521;
  color: #2b1609;
}

.selected-village-head,
.selected-village-stats,
.selected-village-stats span {
  border-color: rgba(92, 55, 18, .35);
}

.map-action {
  border: 2px solid #2b1609;
  color: #f8e6b0;
  font-weight: bold;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.12);
}

.map-action.attack {
  background: linear-gradient(180deg, #8b2a12, #3a0d04);
}

.map-action.support {
  background: linear-gradient(180deg, #3f712d, #1f3f16);
}

.mini-map-surface {
  background:
    linear-gradient(rgba(49, 77, 35, .46), rgba(49, 77, 35, .46)),
    url("assets/world-map-bg-v2.png") center / cover no-repeat;
  border: 4px solid #2b1609;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.45),
    0 0 8px rgba(0,0,0,0.6);
}

.mini-map-surface::before {
  background-image:
    linear-gradient(rgba(0,0,0,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.18) 1px, transparent 1px);
  opacity: .35;
}

.mini-map-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.55);
}

.mini-map-view {
  border: 2px solid rgba(255, 230, 150, .9);
  box-shadow:
    0 0 0 1px rgba(43, 22, 9, .85),
    0 0 8px rgba(255,220,100,.5);
  background: rgba(255,255,255,.08);
}

/* Harita gorsel katmani v57: referans tarzi zemin ve yere oturan koy ikonlari */
.world-map-surface {
  background:
    linear-gradient(rgba(44, 66, 22, .12), rgba(44, 66, 22, .12)),
    url("assets/world-map-bg-v3.png") center / cover no-repeat;
}

.world-map-surface::before {
  background-image:
    linear-gradient(rgba(16, 30, 10, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 30, 10, .22) 1px, transparent 1px);
  opacity: .22;
}

.map-tile {
  border-right-color: rgba(0, 0, 0, .10);
  border-bottom-color: rgba(0, 0, 0, .10);
}

.map-tile .tile-grass {
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.05) 1px, transparent 2px),
    radial-gradient(circle at 70% 68%, rgba(25,45,15,.12) 1px, transparent 3px),
    linear-gradient(135deg, rgba(87,111,40,.14), rgba(55,84,32,.12));
}

.map-tile .tile-forest {
  opacity: .34;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,.35));
}

.map-tile .tile-forest::before,
.map-tile .tile-forest::after {
  width: 20%;
  height: 24%;
  background: #1f3f1e;
  box-shadow:
    -10px 7px 0 #2d5a27,
    9px 8px 0 #244c19,
    1px 17px 0 #315f2b,
    12px -4px 0 #2d5a27;
}

.map-tile .tile-water {
  opacity: .42;
  inset: 18% 14%;
  background:
    radial-gradient(circle at 45% 40%, rgba(95,182,208,.82) 0%, rgba(63,143,176,.78) 45%, rgba(36,93,120,.8) 100%);
}

.map-village-marker {
  transform: translate(-50%, -58%);
  filter: none;
}

.map-village-marker.current {
  transform: translate(-50%, -58%) scale(1.06);
}

.map-village-marker::before {
  left: 50%;
  bottom: -1px;
  width: 46px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  filter: blur(3px);
  transform: translateX(-50%);
  z-index: 1;
}

.map-village-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 54px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(27, 34, 12, .34), rgba(27, 34, 12, 0) 70%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

.map-village-marker.selected::after {
  left: 50%;
  bottom: -2px;
  width: 56px;
  height: 30px;
  inset: auto auto -2px 50%;
  border: 2px solid rgba(242, 211, 107, .9);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(77, 42, 12, .18), rgba(77, 42, 12, 0) 68%);
  box-shadow:
    0 0 0 1px rgba(58, 31, 9, .78),
    0 0 6px rgba(255,220,100,.62);
  transform: translateX(-50%);
  z-index: 2;
}

.map-village-icon {
  transform: scale(1.08);
  transform-origin: center bottom;
  filter: drop-shadow(0 8px 6px rgba(0,0,0,.45));
}

.map-village-dot {
  right: 3px;
  top: -5px;
  width: 9px;
  height: 9px;
  border-width: 1px;
}

.mini-map-surface {
  background:
    linear-gradient(rgba(44, 66, 22, .24), rgba(44, 66, 22, .24)),
    url("assets/world-map-bg-v3.png") center / cover no-repeat;
}

/* Harita gorsel katmani v58: Klanlar/Kabile referansina yakin kucuk koy sembolleri */
.map-village-marker {
  transform: translate(-50%, -100%);
  overflow: visible;
}

.map-village-marker.current {
  transform: translate(-50%, -100%) scale(1.04);
}

.map-village-marker::before {
  bottom: -2px;
  width: 34px;
  height: 12px;
  background: rgba(0, 0, 0, .34);
  filter: blur(2px);
}

.map-village-marker::after {
  bottom: 0;
  width: 38px;
  height: 16px;
  background: radial-gradient(ellipse, rgba(22, 32, 10, .28), rgba(22, 32, 10, 0) 72%);
}

.map-village-marker.selected::after {
  bottom: -3px;
  width: 42px;
  height: 24px;
  border: 2px solid rgba(238, 226, 170, .95);
  box-shadow:
    0 0 0 1px rgba(48, 30, 8, .82),
    0 0 5px rgba(255,255,255,.55);
}

.map-village-icon {
  inset: -10% -18% 0;
  width: 136%;
  height: 118%;
  transform: none;
  object-fit: fill;
  object-position: center bottom;
  filter: drop-shadow(0 5px 3px rgba(0,0,0,.48));
}

.map-village-dot {
  right: -5px;
  top: -7px;
  width: 8px;
  height: 8px;
}

.map-village-marker.barbar .map-village-icon {
  filter: grayscale(.72) saturate(.58) brightness(.84) drop-shadow(0 5px 3px rgba(0,0,0,.48));
}

.map-village-marker.other .map-village-icon,
.map-village-marker.enemy .map-village-icon {
  filter: saturate(.9) brightness(.93) drop-shadow(0 5px 3px rgba(0,0,0,.48));
}

/* Harita gorsel katmani v61: tek merkezli koy oturtma ayarlari */
:root {
  --map-village-anchor: translate(-50%, -100%);
  --map-village-current-anchor: translate(-50%, -100%) scale(1.04);
  --map-village-shadow-width: 34px;
  --map-village-shadow-height: 12px;
  --map-village-ground-width: 38px;
  --map-village-ground-height: 16px;
  --map-village-selected-width: 42px;
  --map-village-selected-height: 24px;
}

.map-village-marker {
  transform: var(--map-village-anchor);
}

.map-village-marker.current {
  transform: var(--map-village-current-anchor);
}

.map-village-marker::before {
  width: var(--map-village-shadow-width);
  height: var(--map-village-shadow-height);
}

.map-village-marker::after {
  width: var(--map-village-ground-width);
  height: var(--map-village-ground-height);
}

.map-village-marker.selected::after {
  width: var(--map-village-selected-width);
  height: var(--map-village-selected-height);
}

/* ============================================================
 *  YENİ HARITA TASARIMI (referans görsel)
 *  Tüm eski stillerin üzerine yazar (en sonda olduğu için)
 * ============================================================ */
#tab-map .game-content,
#tab-map .map-board,
#tab-map .map-wrapper,
#tab-map .map-legend-table { display: none !important; }

.ks-map-shell {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 10px;
  height: calc(100vh - 140px);
  min-height: 600px;
  padding: 8px;
  background:
    repeating-linear-gradient(45deg, #f4e4bc 0 2px, #ecd9a6 2px 4px);
  border: 3px solid #3d2418;
  border-radius: 8px;
  margin: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* --- ANA HARITA --- */
.ks-map-area {
  position: relative;
  overflow: hidden;
  border: 3px solid #2b1810;
  border-radius: 6px;
  background: #5a7a3c;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
}
.ks-map-area #world-map {
  position: absolute !important;
  inset: 22px 0 0 30px !important;
  width: calc(100% - 30px) !important;
  height: calc(100% - 22px) !important;
  border: none !important;
  border-radius: 0 !important;
  background: #5a7a3c !important;
  cursor: grab;
}
.ks-map-area #world-map.dragging { cursor: grabbing; }

/* Cetveller (üst/sol) */
.ks-ruler-top, .ks-ruler-left {
  position: absolute;
  background: linear-gradient(180deg, #3d2418, #2b1810);
  color: #d4a85c;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: bold;
  z-index: 4;
  pointer-events: none;
  border-bottom: 1px solid #d4a85c;
  border-right: 1px solid #d4a85c;
}
.ks-ruler-top  { top: 0; left: 30px; right: 0; height: 22px; }
.ks-ruler-left { top: 22px; left: 0; bottom: 0; width: 30px; }
.ks-ruler-top span, .ks-ruler-left span {
  position: absolute;
  text-align: center;
  width: auto;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}
.ks-ruler-top span { top: 4px; transform: translateX(-50%); }
.ks-ruler-left span { left: 4px; transform: translateY(-50%); }

/* Eski cetvelleri gizle (üstte yeni cetvel var) */
.ks-map-area .map-coordinate-layer { display: none !important; }

/* Zoom kontrolleri (sağda) */
.ks-zoom-controls {
  position: absolute;
  top: 40px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 8;
}
.ks-zoom-controls button {
  width: 38px; height: 38px;
  background: linear-gradient(180deg, #4a3018, #2b1810);
  color: #d4a85c;
  border: 2px solid #d4a85c;
  border-radius: 4px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all .15s;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.ks-zoom-controls button:hover {
  background: linear-gradient(180deg, #6a4828, #4a3018);
  color: #ffd98a;
  transform: translateY(-1px);
}

/* Mini harita (sol alt köşe) */
.ks-minimap-wrap {
  position: absolute;
  left: 38px;
  bottom: 60px;
  width: 170px;
  height: 130px;
  background: #1a0f08;
  border: 3px solid #d4a85c;
  border-radius: 4px;
  overflow: hidden;
  z-index: 7;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}
.ks-minimap-wrap #mini-map {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  background: #1a3a14 !important;
  cursor: pointer;
}

/* Lejant (alt çubuk) */
.ks-legend {
  position: absolute;
  left: 220px;
  right: 12px;
  bottom: 12px;
  background: linear-gradient(180deg, rgba(244,228,188,0.97), rgba(228,210,160,0.97));
  border: 2px solid #8b6f3f;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 11px;
  color: #2b1810;
  z-index: 7;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.ks-legend-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 2px 0;
  flex-wrap: wrap;
}
.ks-legend-row b { min-width: 60px; color: #5e2b18; }
.ks-dot {
  display: inline-block;
  width: 11px; height: 11px;
  border: 1.5px solid #2b1810;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.3);
}
.dot-current { background: #ffffff; }
.dot-own     { background: #f5d042; }
.dot-barbar  { background: #999999; }
.dot-other,
.dot-enemy   { background: #c92929; }
.dot-tribe   { background: #2c5fc0; }
.dot-ally    { background: #4ec8ff; }

/* --- KÖY MARKER GÜNCELLEMESİ --- */
.world-map-surface .map-village-marker {
  transition: filter .15s;
}
.world-map-surface .map-village-marker:hover {
  filter: drop-shadow(2px 6px 4px rgba(0,0,0,0.65)) brightness(1.15);
  z-index: 5;
}
.world-map-surface .map-village-marker.selected {
  z-index: 6;
}
/* Seçili köy halkası -- pseudo element transform'a etki etmesin */
.world-map-surface .map-village-marker.selected::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 160%;
  height: 160%;
  border: 3px solid #ffd98a;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 217, 138, 0.75),
              inset 0 0 6px rgba(255, 217, 138, 0.35);
  background: transparent;
  pointer-events: none;
  animation: ks-pulse 1.8s ease-in-out infinite;
  z-index: 2;
}
@keyframes ks-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 217, 138, 0.7),  inset 0 0 6px rgba(255, 217, 138, 0.3); }
  50%      { box-shadow: 0 0 22px rgba(255, 217, 138, 1.0),  inset 0 0 10px rgba(255, 217, 138, 0.5); }
}

/* Seçili köyün koordinat tooltip'i */
.ks-selected-tooltip {
  position: absolute;
  background: rgba(43, 24, 16, 0.95);
  color: #ffd98a;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #d4a85c;
  white-space: nowrap;
  z-index: 6;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* --- SAĞ PANEL --- */
.ks-side {
  background:
    linear-gradient(180deg, rgba(244, 228, 188, 0.98), rgba(228, 210, 160, 0.98));
  border: 3px solid #8b6f3f;
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.4);
  overflow-y: auto;
}
.ks-side-title {
  background: linear-gradient(180deg, #8b1a1a, #5e0f0f);
  color: #ffd98a;
  text-align: center;
  font-family: 'Georgia', serif;
  font-size: 16px;
  font-weight: bold;
  padding: 8px;
  border: 2px solid #2b1810;
  border-radius: 4px;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

.ks-village-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 110px;
  background:
    radial-gradient(ellipse at center, #6b8a48 0%, #4a6a30 100%);
  border: 2px solid #8b6f3f;
  border-radius: 4px;
  margin-bottom: 6px;
  position: relative;
}
.ks-village-preview img {
  max-width: 80px;
  max-height: 80px;
  filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.5));
}
.ks-village-preview .ks-preview-flag {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #2b1810;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.ks-info-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 4px;
  border-bottom: 1px dashed rgba(139, 111, 63, 0.5);
  font-size: 13px;
  color: #2b1810;
}
.ks-info-row b { color: #5e2b18; font-weight: 600; }
.ks-info-row span { font-weight: 700; }

.ks-actions { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ks-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border: 2px solid #2b1810;
  border-radius: 4px;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  transition: filter .15s, transform .1s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.ks-action-btn:hover:not(:disabled) { filter: brightness(1.15); }
.ks-action-btn:active:not(:disabled) { transform: translateY(1px); }
.ks-action-btn:disabled {
  background: linear-gradient(180deg, #888, #555) !important;
  cursor: not-allowed;
  opacity: 0.6;
}
.ks-attack  { background: linear-gradient(180deg, #c92929, #8b1a1a); }
.ks-support { background: linear-gradient(180deg, #4a8a3c, #2e5a26); }
.ks-spy     { background: linear-gradient(180deg, #5a7a9e, #2c4660); }
.ks-reserve { background: linear-gradient(180deg, #c7912f, #8a5c12); }
.ks-reserve-row span { color: #b6392c; }

.ks-favorite-btn {
  margin-top: 6px;
  background: transparent;
  border: 2px dashed #8b6f3f;
  color: #5e2b18;
  padding: 8px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 600;
  transition: background .15s;
}
.ks-favorite-btn:hover { background: rgba(212, 168, 92, 0.15); }
.ks-favorite-btn.active { color: #c98a2a; background: rgba(212, 168, 92, 0.2); }

.ks-side .selected-empty {
  text-align: center;
  color: #8b6f3f;
  padding: 40px 12px;
  font-style: italic;
}

/* Eski mini-map dot stilleri uygulanmaya devam etsin */

/* ============================================================
   KLAN SİSTEMİ
   ============================================================ */

.clan-wrap { display: flex; flex-direction: column; gap: 16px; padding: 12px; }

.clan-header { background: linear-gradient(180deg,#2b1b10,#1a0e06); border: 1px solid #c7a56a; border-radius: 6px; padding: 14px; color: #fff0c6; }
.clan-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.clan-tag { background: #c7a56a; color: #2a1608; font-weight: 900; font-size: 1.1rem; padding: 2px 8px; border-radius: 4px; }
.clan-name { font-size: 1.2rem; font-weight: 700; color: #fff4d7; }
.clan-desc { color: #d4b88a; font-size: .88rem; margin: 4px 0 8px; }
.clan-meta { margin-bottom: 10px; }
.clan-member-count { font-size: .85rem; color: #a08050; }
.clan-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.clan-members-section { background: #fff8e8; border: 1px solid #d2b77b; border-radius: 5px; padding: 12px; }
.clan-members-section h4 { margin: 0 0 10px; font-size: .92rem; color: #2a1608; }
.clan-members-list { display: flex; flex-direction: column; gap: 6px; }
.clan-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; flex-wrap: wrap; }
.member-info { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; }
.member-role { font-size: .82rem; font-weight: 700; }
.member-name { font-weight: 700; color: #2a1608; }
.member-village { color: #888; font-size: .8rem; }
.member-stats { font-size: .8rem; color: #6b4b24; }
.member-actions { display: flex; gap: 4px; }

.clan-no-clan { display: flex; flex-direction: column; gap: 16px; }
.clan-section { background: #fff8e8; border: 1px solid #d2b77b; border-radius: 5px; padding: 14px; }
.clan-section h3 { margin: 0 0 12px; font-size: 1rem; color: #2a1608; }

.clan-create-form { display: flex; flex-direction: column; gap: 10px; }
.clan-form-row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.clan-form-group { display: flex; flex-direction: column; gap: 4px; }
.clan-form-group label { font-size: .82rem; font-weight: 700; color: #6b4b24; }
.clan-form-group label small { font-weight: 400; color: #999; }
.clan-form-group input { padding: 7px 10px; border: 1px solid #c9a06a; border-radius: 4px; background: #fff8e8; font-family: Georgia,serif; font-size: .9rem; color: #2a1608; }
#dip-clan-select, #dip-status-select { padding: 7px 10px; border: 1px solid #c9a06a; border-radius: 4px; background: #fff8e8; font-family: Georgia,serif; font-size: .85rem; color: #2a1608; }

.clan-list { display: flex; flex-direction: column; gap: 8px; }
.clan-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; }
.clan-list-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.clan-list-meta { font-size: .8rem; color: #888; }
.clan-list-desc { font-size: .8rem; color: #6b4b24; margin: 2px 0 0; }

.btn-secondary-sm { padding: 5px 12px; background: linear-gradient(180deg,#6b4b24,#3a2010); color: #fff0c6; border: 1px solid #8b6030; border-radius: 4px; cursor: pointer; font-size: .82rem; font-family: Georgia,serif; font-weight: 700; }
.btn-secondary-sm:hover { background: #3a2010; }
.btn-secondary-sm:disabled { opacity: .55; cursor: default; }
.btn-xs { padding: 3px 8px; background: linear-gradient(180deg,#3a6010,#1e3a08); color: #c8f0a0; border: 1px solid #2a5010; border-radius: 3px; cursor: pointer; font-size: .76rem; font-family: Georgia,serif; font-weight: 700; }
.btn-xs:hover { background: #2a5010; }
.btn-danger-xs { background: linear-gradient(180deg,#8f240e,#4b1007); color: #ffd0c8; border-color: #6b1007; }
.btn-danger-xs:hover { background: #6b1007; }
.btn-primary-sm { padding: 6px 14px; background: linear-gradient(180deg,#c7912f,#8a5c12); color: #2a1608; border: 1px solid #ecc878; border-radius: 4px; cursor: pointer; font-size: .82rem; font-family: Georgia,serif; font-weight: 800; }
.btn-primary-sm:hover { filter: brightness(1.08); }
.btn-danger-sm { padding: 6px 14px; background: linear-gradient(180deg,#8f240e,#4b1007); color: #ffd0c8; border: 1px solid #6b1007; border-radius: 4px; cursor: pointer; font-size: .82rem; font-family: Georgia,serif; font-weight: 700; }
.btn-danger-sm:hover { background: #6b1007; }

/* ── Klan sekme barı ── */
.clan-tabbar { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid #c7a56a; padding-bottom: 0; }
.clan-tab-btn { padding: 8px 14px; background: #fff0c8; border: 1px solid #d2b77b; border-bottom: none; border-radius: 6px 6px 0 0; cursor: pointer; font-family: Georgia,serif; font-size: .85rem; font-weight: 700; color: #6b4b24; }
.clan-tab-btn:hover { background: #ffe6a8; }
.clan-tab-btn.active { background: #fff8e8; color: #2a1608; border-bottom: 2px solid #fff8e8; margin-bottom: -2px; position: relative; }
.clan-tab-body { background: #fff8e8; border: 1px solid #d2b77b; border-top: none; border-radius: 0 0 6px 6px; padding: 14px; display: flex; flex-direction: column; gap: 14px; }

.clan-genel-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.clan-genel-table th { text-align: left; padding: 8px 10px; background: #f0dba8; color: #4a2e10; border-bottom: 2px solid #c7a56a; }
.clan-genel-table td { padding: 7px 10px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.clan-genel-table tr:hover td { background: rgba(217,169,78,0.08); }
.clan-genel-date { white-space: nowrap; color: #8a6530; font-size: .8rem; }

/* ── Üyeler tablosu ── */
.clan-uyeler-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.clan-uyeler-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.clan-uyeler-table th { text-align: left; padding: 7px 9px; background: #f0dba8; color: #4a2e10; border-bottom: 2px solid #c7a56a; }
.clan-uyeler-table td { padding: 7px 9px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.clan-uyeler-table tr:hover td { background: rgba(217,169,78,0.08); }
.clan-role-tag { color: #8a4a12; font-weight: 700; font-size: .8rem; }

/* ── Üye yönetim modalı ── */
.clan-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; }

/* ── Merkezi oyuncu/klan link stili ── */
.player-link, .clan-link {
  color: #8a4a12;
  cursor: pointer;
  text-decoration: none;
  font-weight: 700;
}
.player-link:hover, .clan-link:hover { text-decoration: underline; color: #b6392c; }

/* ── Oyuncu/Klan Profili — building-page içinde sayfa olarak ── */
.player-profile-inline {
  font-family: Georgia, serif;
  color: #2a1608;
}

.player-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 700px) { .player-profile-grid { grid-template-columns: 1fr; } }
.player-profile-col { display: flex; flex-direction: column; gap: 14px; }

.player-profile-section { background: #fffaf0; border: 1px solid #d2b77b; border-radius: 8px; padding: 12px 16px; margin: 0 0 16px; }
.player-profile-grid .player-profile-section { margin: 0; }
.player-profile-section h4 { margin: 0 0 10px; font-size: .92rem; color: #6b4b24; }
.player-profile-section h4 small { font-weight: 400; color: #a08a60; font-size: .76rem; }

.player-stat-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #ecdfc0; font-size: .85rem; }
.player-stat-row:last-child { border-bottom: none; }
.player-stat-row span { color: #6b5a3e; }
.player-stat-row b { color: #2a1608; text-align: right; }

.player-bio-text { margin: 0; font-size: .85rem; line-height: 1.5; color: #4a3520; white-space: pre-wrap; }

.player-scroll-table { max-height: 180px; overflow-y: auto; }
.player-mini-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.player-mini-table td { padding: 5px 6px; border-bottom: 1px solid #ecdfc0; color: #2a1608; }

.player-village-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.player-village-table th { text-align: left; padding: 7px 9px; background: #f0dba8; color: #4a2e10; border-bottom: 2px solid #c7a56a; }
.player-village-table td { padding: 7px 9px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.player-village-build-bar { width: 70px; height: 8px; background: #e8d4a8; border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; }
.player-village-build-fill { height: 100%; background: linear-gradient(90deg, #c7912f, #8a5c12); }
.player-village-table small { color: #8a6530; margin-left: 4px; }

/* ── Klan Profili özel ── */
.clan-profile-box { max-width: 880px; }
.clan-emblem-box { display: flex; align-items: center; justify-content: center; min-height: 100px; }
.clan-emblem-img { max-width: 160px; max-height: 160px; border-radius: 6px; border: 1px solid #d2b77b; }
.clan-emblem-placeholder { font-size: 56px; opacity: .5; }
.clan-modal-box { background: #fff8e8; border: 2px solid #c7a56a; border-radius: 8px; padding: 18px; width: min(420px, 100%); max-height: 86vh; overflow-y: auto; }
.clan-modal-box h3 { margin: 0 0 14px; color: #2a1608; font-family: Georgia,serif; }
.clan-modal-section { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #e8d4a8; }
.clan-modal-section label { display: block; font-size: .8rem; font-weight: 700; color: #6b4b24; margin-bottom: 6px; }
.pearl-quick-donate-row { display: flex; gap: 6px; margin-bottom: 8px; }
.pearl-quick-donate-row .btn-secondary-sm { flex: 1; text-align: center; }
.clan-perm-checks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; font-size: .84rem; color: #2a1608; }
.clan-perm-checks label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.clan-modal-actions { display: flex; justify-content: flex-end; margin-top: 10px; }

/* ── Profil sekmesi ── */
.clan-profile-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.clan-profile-table th { text-align: left; padding: 9px 12px; background: #f0dba8; color: #4a2e10; width: 42%; border-bottom: 1px solid #e8d4a8; font-weight: 700; }
.clan-profile-table td { padding: 9px 12px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.clan-profile-table td small { color: #8a6530; font-weight: 400; }
.clan-profile-desc { color: #2a1608; font-size: .88rem; line-height: 1.5; white-space: pre-wrap; }

/* ── Diplomasi sekmesi ── */
.dip-status-pill { display: inline-block; padding: 4px 11px; border-radius: 20px; font-size: .8rem; font-weight: 700; }
.dip-status-pill.dip-ally { background: rgba(111,174,94,0.18); color: #3a7a2a; }
.dip-status-pill.dip-enemy { background: rgba(182,57,44,0.18); color: #8f240e; }
.dip-status-pill.dip-peace { background: rgba(120,150,200,0.18); color: #2a4a7a; }
.dip-search-results { position: absolute; top: 100%; left: 0; right: 0; background: #fff8e8; border: 1px solid #c9a06a; border-radius: 4px; max-height: 200px; overflow-y: auto; z-index: 20; box-shadow: 0 6px 14px rgba(0,0,0,0.18); }
.dip-search-item { padding: 8px 12px; cursor: pointer; font-size: .85rem; color: #2a1608; border-bottom: 1px solid #e8d4a8; }
.dip-search-item:hover { background: #ffe6a8; }
.dip-search-item:last-child { border-bottom: none; }
.dip-search-empty { padding: 10px 12px; font-size: .82rem; color: #8a6530; }
.dip-selected-clan { margin-top: 8px; padding: 8px 12px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; font-size: .85rem; color: #2a1608; }

/* ── Rezerve sekmesi ── */
.clan-rezerve-info { font-size: .82rem; color: #6b4b24; margin-bottom: 12px; }
.clan-rezerve-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.clan-rezerve-table th { text-align: left; padding: 7px 9px; background: #f0dba8; color: #4a2e10; border-bottom: 2px solid #c7a56a; }
.clan-rezerve-table td { padding: 7px 9px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.clan-rezerve-table tr:hover td { background: rgba(217,169,78,0.08); }
.clan-rezerve-table td small { color: #8a6530; display: block; font-size: .74rem; }
.rezerve-group-head { text-align: center; background: #e8c888 !important; }

.rezerve-filter-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: .82rem; margin: 12px 0; padding: 8px 0; border-top: 1px solid #e8d4a8; border-bottom: 1px solid #e8d4a8; }
.rezerve-filter-btn { background: none; border: none; color: #6b4b24; font-weight: 700; cursor: pointer; padding: 4px 6px; font-family: Georgia,serif; font-size: .82rem; }
.rezerve-filter-btn:hover { color: #2a1608; text-decoration: underline; }
.rezerve-filter-btn.active { color: #b6392c; }

.clan-rezerve-limits { margin-top: 16px; border: 1px solid #d2b77b; border-radius: 6px; overflow: hidden; max-width: 320px; }
.clan-rezerve-limits h4 { margin: 0; padding: 8px 12px; background: #f0dba8; color: #4a2e10; font-size: .88rem; }
.clan-rezerve-limit-row { display: flex; justify-content: space-between; padding: 7px 12px; border-top: 1px solid #e8d4a8; font-size: .85rem; color: #2a1608; }

/* ── Klan Forumu (önizlemede onaylanan tema) ── */
.forum-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.forum-new-btn { background: linear-gradient(180deg,#b6392c,#8c2a22); color: #f3cd7e; border: 1px solid #d9a94e; font-size: .83rem; padding: 7px 14px; border-radius: 5px; cursor: pointer; font-weight: 700; font-family: Georgia,serif; }
.forum-new-btn:hover { filter: brightness(1.08); }
.forum-icon-btn-text { background: none; border: 1px solid rgba(196,154,79,0.3); color: #6b4b24; font-size: .8rem; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
.forum-icon-btn-text:hover { background: rgba(217,169,78,0.08); }
.forum-icon-btn-text.danger { color: #8c2a22; border-color: rgba(140,42,34,0.3); }
.forum-icon-btn-text.danger:hover { background: rgba(140,42,34,0.08); }

.forum-box { background: #fff8e8; border: 1px solid #d2b77b; border-radius: 8px; overflow: hidden; }

.forum-cat-row, .forum-topic-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #e8d4a8; cursor: pointer; }
.forum-cat-row:last-child, .forum-topic-row:last-child { border-bottom: none; }
.forum-cat-row:hover, .forum-topic-row:hover { background: rgba(217,169,78,0.08); }
.forum-cat-icon { font-size: 18px; flex: none; }
.forum-topic-icon { font-size: 16px; flex: none; }
.forum-topic-icon.pinned { filter: none; }
.forum-cat-info { flex: 1; min-width: 0; }
.forum-cat-name { margin: 0; font-size: .9rem; font-weight: 700; color: #2a1608; }
.forum-cat-meta { margin: 2px 0 0; font-size: .76rem; color: #8a6530; }
.forum-cat-arrow { color: #8a6530; font-size: 1.1rem; flex: none; }
.forum-icon-btn { background: none; border: none; color: #8a6530; cursor: pointer; font-size: .85rem; padding: 4px; flex: none; }
.forum-icon-btn:hover { color: #8c2a22; }

.forum-breadcrumb { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: .85rem; }
.forum-back-btn { background: none; border: none; color: #8a4a12; cursor: pointer; font-weight: 700; font-size: .85rem; padding: 0; }
.forum-back-btn:hover { text-decoration: underline; }
.forum-breadcrumb-sep { color: #c9a06a; }
.forum-breadcrumb-current { color: #2a1608; font-weight: 700; }

/* ── Konu içi yorumlar ── */
.forum-post-row { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #e8d4a8; }
.forum-post-row:last-child { border-bottom: none; }
.forum-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(180deg,#c7912f,#8a5c12); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: #2a1608; flex: none; }
.forum-post-body { flex: 1; min-width: 0; }
.forum-post-head { display: flex; align-items: baseline; gap: 6px; }
.forum-post-author { font-size: .85rem; font-weight: 700; color: #8a4a12; }
.forum-post-time { font-size: .72rem; color: #a08a60; }
.forum-quote-box { background: rgba(217,169,78,0.08); border-left: 2px solid #8a5c12; border-radius: 0 4px 4px 0; padding: 5px 9px; margin: 4px 0 6px; font-size: .76rem; color: #8a6530; }
.forum-post-text { margin: 2px 0 6px; font-size: .85rem; line-height: 1.5; color: #2a1608; }
.forum-post-actions { display: flex; align-items: center; gap: 12px; }
.forum-reaction { font-size: .78rem; color: #8a6530; cursor: pointer; padding: 2px 6px; border-radius: 10px; }
.forum-reaction:hover { background: rgba(217,169,78,0.12); }
.forum-reaction.active { background: rgba(182,57,44,0.12); color: #8c2a22; }
.forum-action-link { font-size: .78rem; color: #6b4b24; cursor: pointer; }
.forum-action-link:hover { text-decoration: underline; }
.forum-mini-btn { background: none; border: none; color: #a08a60; cursor: pointer; font-size: .78rem; padding: 0; }
.forum-mini-btn:hover { color: #8c2a22; }

.forum-quote-preview-box { display: flex; align-items: center; gap: 6px; background: rgba(217,169,78,0.1); border-left: 2px solid #8a5c12; border-radius: 0 4px 4px 0; padding: 6px 10px; margin: 8px 0; font-size: .8rem; color: #6b4b24; }
.forum-write-row { display: flex; gap: 8px; margin-top: 8px; align-items: flex-end; }
.forum-write-row textarea { flex: 1; padding: 8px 10px; border: 1px solid #c9a06a; border-radius: 5px; background: #fff8e8; font-family: inherit; font-size: .85rem; color: #2a1608; resize: vertical; }
.forum-send-btn { background: linear-gradient(180deg,#b6392c,#8c2a22); color: #f3cd7e; border: 1px solid #d9a94e; font-size: .83rem; padding: 9px 16px; border-radius: 5px; cursor: pointer; font-weight: 700; font-family: Georgia,serif; white-space: nowrap; }
.forum-send-btn:hover { filter: brightness(1.08); }

/* ── Klan Elması bakiyesi (ortak) ── */
.clan-pearl-balance { display: flex; align-items: center; gap: 10px; background: #261d15; border: 1px solid rgba(196,154,79,0.3); border-radius: 8px; padding: 12px 16px; flex-wrap: wrap; }
.clan-pearl-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.pearl-ranking-box { max-width: 480px; }
.pearl-ranking-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.pearl-ranking-table th { text-align: left; padding: 6px 8px; background: #f0dba8; color: #4a2e10; border-bottom: 2px solid #c7a56a; }
.pearl-ranking-table td { padding: 6px 8px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.pearl-ranking-table th:not(:first-child), .pearl-ranking-table td:not(:first-child) { text-align: right; }
.pearl-ranking-table tr.pearl-ranking-me td { background: rgba(217,169,78,0.18); font-weight: 700; }
.clan-pearl-amount { margin: 0; font-size: 1.3rem; font-weight: 800; color: #f3cd7e; font-family: Georgia,serif; }
.clan-pearl-label { margin: 0; font-size: .76rem; color: #a99a7c; }

/* ── Klan Araştırmaları ── */
.clan-research-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.research-card { background: #fff8e8; border: 1px solid #d2b77b; border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.research-card-head { display: flex; align-items: center; gap: 10px; }
.research-icon { font-size: 26px; flex: none; }
.research-card-title { flex: 1; }
.research-name { margin: 0; font-size: .9rem; font-weight: 700; color: #2a1608; }
.research-level { margin: 2px 0 0; font-size: .76rem; color: #8a6530; }
.research-desc { margin: 0; font-size: .76rem; color: #6b4b24; line-height: 1.4; }
.research-start-btn { background: linear-gradient(180deg,#b6392c,#8c2a22); color: #f3cd7e; border: 1px solid #d9a94e; font-size: .82rem; padding: 8px 12px; border-radius: 5px; cursor: pointer; font-weight: 700; font-family: Georgia,serif; }
.research-start-btn:hover { filter: brightness(1.08); }
.research-maxed { background: rgba(111,174,94,0.15); color: #3a7a2a; font-size: .8rem; padding: 7px 10px; border-radius: 5px; text-align: center; font-weight: 700; }
.research-locked { background: rgba(169,154,124,0.12); color: #8a6530; font-size: .76rem; padding: 7px 10px; border-radius: 5px; text-align: center; }
.research-queued { background: rgba(217,169,78,0.15); color: #8a4a12; font-size: .78rem; padding: 7px 10px; border-radius: 5px; text-align: center; font-weight: 700; }
.research-countdown { display: block; font-weight: 400; font-size: .74rem; margin-top: 2px; }
.research-detail-btn { background: none; border: 1px solid rgba(196,154,79,0.3); color: #6b4b24; font-size: .9rem; padding: 4px 8px; border-radius: 5px; cursor: pointer; flex: none; }
.research-detail-btn:hover { background: rgba(217,169,78,0.1); }
.research-speedup-btn { background: linear-gradient(180deg,#3a6ab0,#274a7a); color: #d8e8ff; border: 1px solid #6a9ad0; font-size: .78rem; padding: 6px 10px; border-radius: 5px; cursor: pointer; font-weight: 700; }
.research-speedup-btn:hover { filter: brightness(1.1); }
.research-active-banner { background: rgba(217,169,78,0.12); border: 1px solid rgba(217,169,78,0.35); color: #6b4b24; font-size: .85rem; padding: 10px 14px; border-radius: 6px; }
.research-active-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.research-active-countdown { font-weight: 700; color: #8a4a12; }

.research-detail-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.research-detail-table th { text-align: left; padding: 6px 9px; background: #f0dba8; color: #4a2e10; border-bottom: 2px solid #c7a56a; }
.research-detail-table td { padding: 6px 9px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.research-detail-table tr.research-row-done td { background: rgba(111,174,94,0.08); }
.research-status-done { color: #3a7a2a; font-weight: 700; }
.research-status-active { color: #8a4a12; font-weight: 700; }
.research-status-pending { color: #a08a60; }

/* ── Klan Seviyesi ── */
.clan-level-hero { text-align: center; background: linear-gradient(180deg, #2f2419, #261d15); border: 1px solid #d9a94e; padding: 20px 16px 18px; }

.clan-shield-wrap { position: relative; display: inline-block; width: 120px; }
.clan-shield-img { width: 120px; height: auto; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.clan-shield-level {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff6e0;
  font-family: Georgia, serif;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.6);
}

.clan-ribbon-wrap { position: relative; display: inline-block; width: 240px; margin-top: -14px; }
.clan-ribbon-img { width: 240px; height: auto; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)); }
.clan-ribbon-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff2d0;
  font-family: Georgia, serif;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  white-space: nowrap;
}

.clan-level-progress-track {
  position: relative;
  margin: 16px auto 0;
  max-width: 360px;
  height: 22px;
  background: #1a1410;
  border: 1px solid #5a3a1a;
  border-radius: 12px;
  overflow: hidden;
}
.clan-level-progress-fill {
  height: 100%;
  background: linear-gradient(180deg, #b6392c, #8c2a22);
  transition: width 0.3s;
}
.clan-level-progress-label {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .76rem;
  font-weight: 700;
  color: #fff2d0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.clan-level-hero .clan-pearl-balance { justify-content: center; background: rgba(0,0,0,0.2); }

.level-totals-box { background: #fff8e8; border: 1px solid #d2b77b; border-radius: 8px; padding: 4px 14px; }
.level-total-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #e8d4a8; font-size: .85rem; color: #2a1608; }
.level-total-row:last-child { border-bottom: none; }
.level-total-row b { color: #8a4a12; }

.clan-level-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.clan-level-table th { text-align: left; padding: 7px 9px; background: #f0dba8; color: #4a2e10; border-bottom: 2px solid #c7a56a; }
.clan-level-table td { padding: 7px 9px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.clan-level-table tr.level-reached td { background: rgba(111,174,94,0.08); }

.clan-donate-row { display: flex; gap: 16px; flex-wrap: wrap; }
.clan-donate-group { flex: 1; min-width: 220px; }
.clan-donate-group label { display: block; font-size: .8rem; font-weight: 700; color: #6b4b24; margin-bottom: 6px; }
.clan-donate-group label small { font-weight: 400; color: #a08a60; }
.clan-donate-group input { flex: 1; padding: 7px 10px; border: 1px solid #c9a06a; border-radius: 4px; background: #fff8e8; font-size: .85rem; color: #2a1608; }

/* ── Bekleyen başvurular ── */
.clan-requests-list { display: flex; flex-direction: column; gap: 6px; }
.clan-request-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #fff0c8; border: 1px solid #ecc878; border-radius: 4px; }

/* ── İstatistik kartları ── */
.clan-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.clan-stat-card { background: #fff0c8; border: 1px solid #d2b77b; border-radius: 6px; padding: 12px; }
.clan-stat-card .label { font-size: .72rem; color: #8a6530; text-transform: uppercase; letter-spacing: .4px; }
.clan-stat-card .value { font-family: Georgia,serif; font-size: 1.3rem; color: #2a1608; font-weight: 800; margin-top: 4px; }

/* ── Klan günlüğü ── */
.clan-log-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.clan-log-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #e8d4a8; font-size: .82rem; }
.clan-log-icon { flex: none; }
.clan-log-text { flex: 1; color: #2a1608; }
.clan-log-time { flex: none; color: #999; font-size: .74rem; }

@media (max-width: 600px) {
  .clan-form-row { grid-template-columns: 1fr; }
  .clan-member-row { flex-direction: column; align-items: flex-start; }
  .clan-tabbar { overflow-x: auto; }
}

/* ============================================================
   MESAJLAŞMA & RAPORLAR & DUYURULAR
   ============================================================ */

/* BADGE */
.msg-badge { background: #cc2200; color: #fff; font-size: .72rem; font-weight: 900; padding: 1px 5px; border-radius: 10px; margin-left: 4px; vertical-align: middle; }

/* MESAJ WRAP */
.msg-wrap { display: flex; flex-direction: column; gap: 16px; padding: 12px; }
.msg-section { background: #fff8e8; border: 1px solid #d2b77b; border-radius: 5px; padding: 14px; }
.msg-section h3 { margin: 0 0 12px; font-size: 1rem; color: #2a1608; display: flex; align-items: center; gap: 8px; }

/* MESAJ FORMU */
.msg-form { display: flex; flex-direction: column; gap: 8px; }
.msg-form input, .msg-form textarea { padding: 7px 10px; border: 1px solid #c9a06a; border-radius: 4px; background: #fff8e8; font-family: Georgia,serif; font-size: .9rem; color: #2a1608; resize: vertical; }

/* MESAJ LİSTESİ */
.msg-list { display: flex; flex-direction: column; gap: 4px; }
.msg-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; cursor: pointer; gap: 8px; }
.msg-row:hover { background: #ffe8a0; }
.msg-unread { background: #fff8d0; border-color: #c7a020; font-weight: 700; }
.msg-row-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.msg-row-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.msg-dot { color: #cc2200; font-size: .9rem; }
.msg-from { font-size: .82rem; font-weight: 700; color: #5a3a10; white-space: nowrap; }
.msg-subject { font-size: .88rem; color: #2a1608; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-time { font-size: .76rem; color: #999; white-space: nowrap; }

/* MODAL */
.msg-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.msg-modal { background: linear-gradient(180deg,#fff8e8,#f5e4b9); border: 2px solid #c7a56a; border-radius: 8px; max-width: 560px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,.35); }
.msg-modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid #d2b77b; }
.msg-modal-subject { font-size: 1rem; font-weight: 700; color: #2a1608; }
.msg-modal-meta { font-size: .8rem; color: #888; margin-top: 3px; }
.msg-modal-close { background: transparent; border: 0; font-size: 1.2rem; cursor: pointer; color: #888; padding: 0 4px; }
.msg-modal-close:hover { color: #cc2200; }
.msg-modal-body { padding: 14px 16px; font-size: .92rem; color: #2a1608; line-height: 1.6; min-height: 80px; white-space: pre-wrap; }
.msg-modal-footer { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid #d2b77b; justify-content: flex-end; }

/* RAPORLAR */
.reports-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
.reports-col h3 { margin: 0 0 10px; font-size: .95rem; color: #2a1608; display: flex; align-items: center; gap: 6px; }
.report-count { font-size: .78rem; background: #c9a06a; color: #fff; padding: 1px 6px; border-radius: 10px; }
.report-card { border: 1px solid #d2b77b; border-radius: 5px; margin-bottom: 6px; overflow: hidden; }
.report-win { border-color: #2a7a20; }
.report-loss { border-color: #8f240e; }
.report-spy { border-color: #5a5a20; }
.report-card-header { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: .82rem; flex-wrap: wrap; }
.report-win .report-card-header { background: #d4edda; }
.report-loss .report-card-header { background: #f8d7da; }
.report-spy .report-card-header { background: #fff3cd; }
.report-result { font-weight: 700; font-size: .85rem; }
.report-enemy { flex: 1; font-weight: 700; color: #2a1608; }
.report-time { color: #999; font-size: .76rem; }
.report-card-body { padding: 7px 10px; background: #fff8e8; font-size: .82rem; color: #2a1608; }
.report-row { margin-bottom: 2px; }

/* DUYURULAR */
.ann-wrap { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.ann-admin-section { background: #fff8e8; border: 1px solid #d2b77b; border-radius: 5px; padding: 14px; }
.ann-admin-section h3 { margin: 0 0 12px; font-size: 1rem; color: #2a1608; }
.ann-form { display: flex; flex-direction: column; gap: 8px; }
.ann-form input, .ann-form textarea { padding: 7px 10px; border: 1px solid #c9a06a; border-radius: 4px; background: #fff8e8; font-family: Georgia,serif; font-size: .9rem; color: #2a1608; resize: vertical; }
.ann-list { display: flex; flex-direction: column; gap: 10px; }
.ann-card { background: linear-gradient(180deg,#fff8e8,#f5e4b9); border: 1px solid #c7a56a; border-radius: 6px; overflow: hidden; }
.ann-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: linear-gradient(180deg,#2b1b10,#1a0e06); flex-wrap: wrap; gap: 6px; }
.ann-title { font-size: .95rem; font-weight: 700; color: #fff4d7; }
.ann-meta { font-size: .78rem; color: #a08050; }
.ann-body { padding: 12px 14px; font-size: .9rem; color: #2a1608; line-height: 1.6; }

@media (max-width: 700px) {
  .reports-wrap { grid-template-columns: 1fr; }
  .msg-row { flex-wrap: wrap; }
}

/* ============================================================
   RAPORLAR YENİ TASARIM
   ============================================================ */

.reports-page { display: flex; flex-direction: column; }

.reports-filter-tabs { display: flex; gap: 4px; padding: 10px 12px; background: #f0dca8; border-bottom: 1px solid #d2b77b; flex-wrap: wrap; }
.rep-ftab { padding: 6px 14px; background: #e8cc8e; border: 1px solid #c9a06a; border-radius: 4px; cursor: pointer; font-family: Georgia,serif; font-size: .85rem; font-weight: 700; color: #5a3a10; }
.rep-ftab.active { background: linear-gradient(180deg,#2b1b10,#1a0e06); color: #fff4d7; border-color: #c7a56a; }
.rep-ftab:hover:not(.active) { background: #d8b878; }
.rep-count { background: rgba(0,0,0,.15); padding: 1px 5px; border-radius: 8px; font-size: .78rem; margin-left: 4px; }

.reports-list { display: flex; flex-direction: column; }

.rep-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #e8d090; cursor: pointer; font-size: .88rem; }
.rep-row:hover { background: #fff8d0; }
.rep-row-win { background: #e6ffe6; border-left: 4px solid #28a745; }
.rep-row-win:hover { background: #d0ffd0; }
.rep-row-win-loss { background: #fffbe6; border-left: 4px solid #ffc107; }
.rep-row-win-loss:hover { background: #fff3cc; }
.rep-row-loss { background: #fff0f0; border-left: 4px solid #dc3545; }
.rep-row-loss:hover { background: #ffe0e0; }
.rep-row-spy { background: #e8f4ff; border-left: 4px solid #17a2b8; }
.rep-row-spy:hover { background: #d0eaff; }
.rep-row-has-spy { border-right: 4px solid #17a2b8; }

.rep-icon { font-size: 1rem; flex-shrink: 0; }
.rep-title { flex: 1; color: #2a1608; line-height: 1.4; }
.rep-title b { color: #5a3a10; }
.rep-date { font-size: .78rem; color: #999; white-space: nowrap; flex-shrink: 0; }

/* RAPOR DETAY MODAL */
.report-modal { max-width: 620px; max-height: 85vh; display: flex; flex-direction: column; }
.report-detail-body { overflow-y: auto; padding: 0; flex: 1; }

.rep-detail-result { padding: 12px 16px; font-size: 1.1rem; font-weight: 700; text-align: center; }
.rep-result-win { background: linear-gradient(180deg,#d4edda,#c3e6cb); color: #155724; }
.rep-result-loss { background: linear-gradient(180deg,#f8d7da,#f5c6cb); color: #721c24; }

.rep-detail-section { padding: 12px 16px; border-bottom: 1px solid #e8d090; }
.rep-detail-section-title { font-weight: 700; color: #2a1608; margin-bottom: 8px; font-size: .92rem; }
.rep-attacker { background: #fff5f0; }
.rep-defender { background: #f0f5ff; }
.rep-loot { background: #fffff0; }

.rep-detail-troops { margin-bottom: 5px; font-size: .85rem; color: #5a3a10; }
.rep-detail-troops b { color: #2a1608; }
.rep-troop-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rep-troop { background: #fff0c8; border: 1px solid #d2b77b; padding: 2px 8px; border-radius: 4px; font-size: .82rem; color: #2a1608; }

.rep-loot-row { display: flex; gap: 16px; font-size: .95rem; flex-wrap: wrap; }
.rep-loot-row b { font-size: 1rem; color: #2a1608; }

/* KARARGAH */
.karargah-header { padding: 8px 0 4px; }
.karargah-header .section-title { color: #2a1608; font-size: 1.1rem; }

/* ============================================================
   KARARGAH PANELİ
   ============================================================ */

.karargah-inner { display: flex; flex-direction: column; gap: 0; }

.karargah-tabs { display: flex; gap: 0; border-bottom: 2px solid #c7a56a; background: #f0dca8; }
.kar-tab { padding: 8px 20px; background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; font-family: Georgia,serif; font-size: .9rem; font-weight: 700; color: #6b4b24; }
.kar-tab.active { color: #2a1608; border-bottom-color: #c7a020; background: #fff8e8; }
.kar-tab:hover:not(.active) { background: #e8cc8e; }

#karargah-tab-content { padding: 12px; }

/* EMİRLER */
.emirler-wrap { display: flex; flex-direction: column; gap: 14px; }
.emir-section { background: #fff8e8; border: 1px solid #d2b77b; border-radius: 5px; padding: 10px; }
.emir-section-title { font-weight: 700; font-size: .9rem; color: #2a1608; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.emir-count { background: #c9a06a; color: #fff; font-size: .75rem; padding: 1px 6px; border-radius: 10px; }

.emir-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; margin-bottom: 5px; border: 1px solid; }
.emir-out { background: #fff5f0; border-color: #e8b090; }
.emir-in { background: #f0f5ff; border-color: #90b0e8; }
.emir-icon { font-size: 1.2rem; flex-shrink: 0; }
.emir-info { flex: 1; min-width: 0; }
.emir-target { font-size: .88rem; color: #2a1608; }
.emir-target b { color: #5a3a10; }
.emir-coords { color: #888; font-size: .82rem; }
.emir-user { color: #aaa; font-size: .78rem; }
.emir-troops { font-size: .8rem; color: #6b4b24; margin-top: 3px; }
.emir-time { flex-shrink: 0; font-size: .82rem; font-weight: 700; color: #cc2200; white-space: nowrap; }

/* BİRLİKLER */
.birlikler-wrap { display: flex; flex-direction: column; gap: 14px; }
.birlik-total { font-size: .88rem; color: #6b4b24; padding: 6px 10px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; }
.birlik-total b { color: #2a1608; font-size: 1rem; }

.birlik-group { background: #fff8e8; border: 1px solid #d2b77b; border-radius: 5px; overflow: hidden; }
.birlik-group-title { padding: 7px 12px; background: linear-gradient(180deg,#3a2510,#2a1808); color: #fff4d7; font-weight: 700; font-size: .88rem; }
.birlik-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; padding: 10px; }

.birlik-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 5px; text-align: center; }
.birlik-empty { opacity: .45; }
.birlik-icon { font-size: 1.5rem; }
.birlik-name { font-size: .72rem; color: #6b4b24; font-weight: 700; }
.birlik-count { font-size: 1rem; font-weight: 900; color: #2a1608; }
.birlik-empty .birlik-count { color: #aaa; }

/* Karargah hotspot pozisyonu */
.hs-command { left: 22%; top: 56%; }

/* KARARGAH MODAL */
.karargah-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.karargah-modal {
  background: linear-gradient(180deg,#fff8e8,#f5e4b9);
  border: 2px solid #c7a56a; border-radius: 8px;
  width: min(700px, 96vw); max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  overflow: hidden;
}
.karargah-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: linear-gradient(180deg,#2b1b10,#1a0e06);
  color: #fff4d7; font-size: 1.05rem; font-weight: 700;
}
.karargah-modal-header button {
  background: transparent; border: 0; color: #fff4d7;
  font-size: 1.2rem; cursor: pointer; padding: 0 4px;
}
.karargah-modal-header button:hover { color: #ff6b6b; }
#karargah-modal-body { overflow-y: auto; flex: 1; }

/* EMİRLER FORMU */
.emir-form-section { background: #fff8e8; border: 1px solid #d2b77b; border-radius: 5px; margin: 12px; }
.emir-form-title { padding: 8px 12px; background: linear-gradient(180deg,#3a2510,#2a1808); color: #fff4d7; font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.emir-badge { background: #cc2200; color: #fff; font-size: .75rem; padding: 1px 6px; border-radius: 10px; }
.emir-form-body { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px; }

.emir-troop-groups { display: flex; flex-wrap: wrap; gap: 10px; }
.emir-troop-group { background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; padding: 8px; }
.emir-troop-group-title { font-size: .78rem; font-weight: 700; color: #6b4b24; margin-bottom: 6px; }
.emir-troop-row { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.emir-troop-icon { font-size: 1rem; width: 22px; text-align: center; }
.emir-troop-input { width: 60px; padding: 3px 5px; border: 1px solid #c9a06a; border-radius: 3px; font-family: Georgia,serif; font-size: .85rem; text-align: center; background: #fff8e8; }
.emir-troop-max { font-size: .75rem; color: #888; }

.emir-target-section { background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; padding: 10px; min-width: 160px; display: flex; flex-direction: column; gap: 8px; }
.emir-target-title { font-size: .85rem; font-weight: 700; color: #2a1608; }
.emir-coord-row { display: flex; align-items: center; gap: 5px; }
.emir-coord-row label { font-size: .82rem; font-weight: 700; color: #6b4b24; }
.emir-coord-input { width: 48px; padding: 4px 5px; border: 1px solid #c9a06a; border-radius: 3px; font-family: Georgia,serif; font-size: .88rem; text-align: center; background: #fff8e8; }
.emir-buttons { display: flex; flex-direction: column; gap: 5px; }

.btn-attack-big { padding: 7px 12px; background: linear-gradient(180deg,#8f240e,#4b1007); color: #ffd0c8; border: 1px solid #6b1007; border-radius: 4px; cursor: pointer; font-family: Georgia,serif; font-weight: 700; font-size: .88rem; }
.btn-attack-big:hover { background: #6b1007; }
.btn-support-big { padding: 7px 12px; background: linear-gradient(180deg,#245d1c,#123b0e); color: #c8f0a0; border: 1px solid #1a4a0c; border-radius: 4px; cursor: pointer; font-family: Georgia,serif; font-weight: 700; font-size: .88rem; }
.btn-support-big:hover { background: #1a4a0c; }

/* AKTİF EMİRLER TABLOSU */
.emir-active-section { margin: 0 12px 12px; background: #fff8e8; border: 1px solid #d2b77b; border-radius: 5px; overflow: hidden; }
.emir-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.emir-table thead tr { background: #e8cc8e; }
.emir-table th { padding: 6px 10px; text-align: left; font-weight: 700; color: #5a3a10; border-bottom: 1px solid #d2b77b; }
.emir-table-row td { padding: 7px 10px; border-bottom: 1px solid #ead8a0; vertical-align: middle; }
.emir-out td { background: #fff5f0; }
.emir-in td { background: #f0f5ff; }
.emir-table-row:hover td { filter: brightness(.96); }
.emir-dir-icon { font-size: 1rem; }
.emir-troops-cell { color: #6b4b24; font-size: .8rem; }
.emir-time-cell { font-weight: 700; color: #cc2200; white-space: nowrap; }
.emir-coords { color: #888; font-size: .78rem; }

@media (max-width: 600px) {
  .emir-form-body { grid-template-columns: 1fr; }
}

/* ============================================================
   KARARGAH TAM EKRAN LAYOUT
   ============================================================ */
.karargah-fullscreen {
  width: min(1200px, 99vw) !important;
  max-height: 97vh !important;
  height: 97vh;
}
.karargah-layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}
.karargah-sidemenu {
  background: #e8cc8e;
  border-right: 1px solid #c9a06a;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.kara-menu-btn {
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  font-family: Georgia,serif;
  font-size: .88rem;
  font-weight: 700;
  color: #5a3a10;
}
.kara-menu-btn.active {
  background: #fff8e8;
  border-left-color: #c7a020;
  color: #2a1608;
}
.kara-menu-btn:hover:not(.active) { background: #d8b878; }

.karargah-content {
  overflow-y: auto;
  padding: 14px 16px;
  background: #fff8e8;
}

/* EMİRLER SAYFASI */
.kara-section-title {
  margin: 0 0 10px;
  font-size: .95rem;
  color: #2a1608;
  padding-bottom: 5px;
  border-bottom: 1px solid #d2b77b;
}
.kara-troop-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.kara-troop-col {
  background: #fff0c8;
  border: 1px solid #d2b77b;
  border-radius: 4px;
  padding: 8px 10px;
  min-width: 140px;
}
.kara-troop-col-title {
  font-size: .78rem;
  font-weight: 700;
  color: #6b4b24;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #d2b77b;
}
.kara-troop-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}
.kara-troop-icon { font-size: 1rem; width: 22px; text-align: center; }
.kara-troop-input {
  width: 56px;
  padding: 3px 5px;
  border: 1px solid #c9a06a;
  border-radius: 3px;
  font-family: Georgia,serif;
  font-size: .85rem;
  text-align: center;
  background: #fff8e8;
}
.kara-troop-avail { font-size: .75rem; color: #888; }

.kara-hedef-bar {
  background: #fff0c8;
  border: 1px solid #d2b77b;
  border-radius: 4px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.kara-hedef-group label {
  font-size: .82rem;
  font-weight: 700;
  color: #6b4b24;
  display: block;
  margin-bottom: 5px;
}
.kara-hedef-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  color: #5a3a10;
}
.kara-coord {
  width: 52px;
  padding: 4px 5px;
  border: 1px solid #c9a06a;
  border-radius: 3px;
  font-family: Georgia,serif;
  font-size: .9rem;
  text-align: center;
  background: #fff8e8;
}
.kara-action-btns {
  display: flex;
  gap: 8px;
}
.kara-btn-attack {
  padding: 8px 18px;
  background: linear-gradient(180deg,#8f240e,#4b1007);
  color: #ffd0c8;
  border: 1px solid #6b1007;
  border-radius: 4px;
  cursor: pointer;
  font-family: Georgia,serif;
  font-weight: 700;
  font-size: .88rem;
}
.kara-btn-attack:hover { background: #6b1007; }
.kara-btn-support {
  padding: 8px 18px;
  background: linear-gradient(180deg,#245d1c,#123b0e);
  color: #c8f0a0;
  border: 1px solid #1a4a0c;
  border-radius: 4px;
  cursor: pointer;
  font-family: Georgia,serif;
  font-weight: 700;
  font-size: .88rem;
}
.kara-btn-support:hover { background: #1a4a0c; }

/* AKTİF EMİRLER TABLOSU */
.kara-emir-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  border: 1px solid #d2b77b;
}
.kara-emir-table th {
  background: #e8cc8e;
  padding: 6px 10px;
  text-align: left;
  font-weight: 700;
  color: #5a3a10;
  border-bottom: 1px solid #d2b77b;
}
.kara-emir-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #ead8a0;
  vertical-align: middle;
}
.kara-row-out td { background: #fff5f0; }
.kara-row-in td { background: #f0f5ff; }
.kara-countdown { color: #cc2200; font-weight: 700; }

/* ORDULAR TABLOSU */
.kara-ordu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  border: 1px solid #d2b77b;
}
.kara-ordu-table th {
  background: #e8cc8e;
  padding: 8px 10px;
  text-align: center;
  border: 1px solid #d2b77b;
  font-size: 1.1rem;
}
.kara-ordu-table td {
  padding: 7px 10px;
  text-align: center;
  border: 1px solid #ead8a0;
}
.kara-ordu-label {
  background: #f5e4b9;
  font-weight: 700;
  color: #5a3a10;
  text-align: left !important;
  padding: 6px 10px !important;
}

@media (max-width: 600px) {
  .karargah-layout { grid-template-columns: 1fr; }
  .karargah-sidemenu { flex-direction: row; border-right: 0; border-bottom: 1px solid #c9a06a; }
}

/* YENİ SAYFALAR */
.kara-coming-soon {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 20px; text-align: center; color: #6b4b24;
}
.kara-soon-icon { font-size: 3rem; margin-bottom: 12px; }
.kara-coming-soon h3 { font-size: 1.2rem; color: #2a1608; margin-bottom: 8px; }
.kara-coming-soon p { color: #888; font-size: .9rem; }
.kara-soon-desc { color: #6b4b24; font-size: .88rem; margin-bottom: 4px; }

/* İSTATİSTİK */
.kara-istatistik { display: flex; flex-direction: column; gap: 12px; }
.kara-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.kara-stat-card {
  background: #fff0c8; border: 1px solid #d2b77b; border-radius: 6px;
  padding: 14px 10px; text-align: center;
}
.kara-stat-value { font-size: 1.4rem; font-weight: 900; color: #2a1608; }
.kara-stat-label { font-size: .78rem; color: #6b4b24; margin-top: 4px; font-weight: 700; }
.kara-stat-table { width: 100%; border-collapse: collapse; font-size: .88rem; border: 1px solid #d2b77b; }
.kara-stat-table th { background: #e8cc8e; padding: 6px 10px; text-align: left; font-weight: 700; color: #5a3a10; border-bottom: 1px solid #d2b77b; }
.kara-stat-table td { padding: 6px 10px; border-bottom: 1px solid #ead8a0; }
.kara-stat-table tr:hover td { background: #fff8e8; }

/* HAZIR BİRLİKLER */
.kara-hazir { padding: 4px; }

/* Karargah yazı rengi düzeltme */
.karargah-content,
.kara-emirler,
.kara-troop-col,
.kara-section-title,
.kara-hedef-bar,
.kara-stat-card,
.kara-menu-btn {
  color: #1a0e00 !important;
}
.kara-troop-avail { color: #555 !important; }
.kara-troop-click {
  cursor: pointer;
  text-decoration: underline;
  color: #3a1e00 !important;
  font-weight: 700;
}
.kara-troop-click:hover { color: #c7a020 !important; }
.kara-troop-col-title { color: #1a0e00 !important; }
.kara-section-title { color: #1a0e00 !important; }
.kara-emir-table th { color: #1a0e00 !important; }

/* Input yazı rengi düzeltme */
.kara-troop-input,
.kara-coord,
.kara-troop-input::placeholder,
.kara-coord::placeholder {
  color: #1a0e00 !important;
}
input[id^="kara-"] {
  color: #1a0e00 !important;
}

/* SİMÜLATÖR */
.sim-table { width: 100%; border-collapse: collapse; font-size: .88rem; border: 1px solid #d2b77b; }
.sim-table th { background: #e8cc8e; padding: 8px 10px; font-weight: 700; color: #1a0e00; border-bottom: 2px solid #c9a06a; }
.sim-table td { padding: 6px 10px; border-bottom: 1px solid #ead8a0; vertical-align: middle; }
.sim-table tr:hover td { background: #fff8e8; }
.sim-troop-label { font-weight: 600; color: #1a0e00; min-width: 120px; }
.sim-input { width: 80px; padding: 4px 6px; border: 1px solid #c9a06a; border-radius: 3px; font-family: Georgia,serif; font-size: .88rem; color: #1a0e00; background: #fff8e8; text-align: center; }
.sim-avail { font-size: .75rem; color: #666; margin-left: 4px; }
.sim-fill-btn { padding: 3px 8px; background: #c9a06a; border: 0; border-radius: 3px; cursor: pointer; font-size: .78rem; font-family: Georgia,serif; color: #1a0e00; margin-left: 8px; }
.sim-fill-btn:hover { background: #a07840; color: #fff; }
.sim-options { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; }
.sim-option-row { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: #1a0e00; }
.sim-option-row label { font-weight: 700; }
.sim-input-sm { width: 60px; padding: 4px 6px; border: 1px solid #c9a06a; border-radius: 3px; font-family: Georgia,serif; font-size: .88rem; color: #1a0e00; background: #fff8e8; text-align: center; }
.sim-result { margin-top: 12px; border: 2px solid #d2b77b; border-radius: 6px; overflow: hidden; }
.sim-result-header { padding: 12px 16px; font-size: 1.05rem; font-weight: 700; text-align: center; }
.sim-win { background: #d4edda; color: #155724; }
.sim-loss { background: #f8d7da; color: #721c24; }
.sim-result-body { padding: 12px 16px; background: #fff8e8; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sim-result-row { display: flex; justify-content: space-between; font-size: .88rem; padding: 4px 8px; background: #fff0c8; border-radius: 3px; }
.sim-result-row b { color: #1a0e00; }

/* HAZIR BİRLİKLER */
.kara-hazir-page { display: flex; flex-direction: column; gap: 10px; }
.hb-save-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; }
.hb-save-row label { font-weight: 700; color: #1a0e00; font-size: .88rem; }
.hb-name-input { padding: 5px 10px; border: 1px solid #c9a06a; border-radius: 4px; font-family: Georgia,serif; font-size: .9rem; color: #1a0e00; background: #fff8e8; min-width: 160px; }

/* HAZIR BİRLİK HIZLI SEÇ BARLARI */
.hb-quick-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px; background: #fff0c8; border: 1px solid #d2b77b;
  border-radius: 4px; margin-bottom: 8px;
}
.hb-quick-label {
  font-size: .82rem; font-weight: 700; color: #1a0e00; white-space: nowrap;
}
.hb-quick-btn {
  padding: 4px 12px; background: linear-gradient(180deg,#6b4b24,#3a2010);
  color: #fff4d7; border: 1px solid #8b6030; border-radius: 4px;
  cursor: pointer; font-family: Georgia,serif; font-size: .82rem; font-weight: 700;
}
.hb-quick-btn:hover { background: #3a2010; }
.hb-clear-btn {
  background: linear-gradient(180deg,#888,#555) !important;
  border-color: #666 !important; color: #fff !important;
}
.hb-clear-btn:hover { background: #444 !important; }

/* SİMÜLATÖR DETAY TABLO */
.sim-result-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 8px 12px; background: #fff8e8;
  border-bottom: 1px solid #d2b77b; font-size: .88rem; color: #1a0e00;
}
.sim-result-meta b { color: #1a0e00; }
.sim-detail-table {
  width: 100%; border-collapse: collapse; font-size: .85rem;
}
.sim-detail-table th {
  background: #e8cc8e; padding: 6px 8px;
  text-align: center; border: 1px solid #d2b77b;
  font-size: 1rem; color: #1a0e00;
}
.sim-detail-table th:first-child {
  text-align: left; min-width: 90px; font-size: .85rem;
}
.sim-detail-table td {
  padding: 5px 8px; text-align: center;
  border: 1px solid #e8d090; color: #1a0e00;
}
.sim-detail-table td:first-child {
  text-align: left; font-weight: 700;
  background: #f5e4b9; color: #5a3a10;
}
.sim-loss-cell {
  color: #cc2200 !important; font-weight: 700;
}

/* ============================================================
   YENİ MESAJ SİSTEMİ
   ============================================================ */
.msg-wrap-new { display: flex; flex-direction: column; }
.msg-tab-bar {
  display: flex; flex-wrap: wrap; gap: 2px;
  background: #e8cc8e; padding: 6px 8px;
  border-bottom: 2px solid #c9a06a;
}
.msg-tab-btn {
  padding: 6px 14px; background: transparent;
  border: 1px solid transparent; border-radius: 4px 4px 0 0;
  cursor: pointer; font-family: Georgia,serif; font-size: .85rem;
  font-weight: 700; color: #5a3a10;
}
.msg-tab-btn.active {
  background: #fff8e8; border-color: #c9a06a;
  border-bottom-color: #fff8e8; color: #1a0e00;
}
.msg-tab-btn:hover:not(.active) { background: #d8b878; }
.msg-tab-content { padding: 0; background: #fff8e8; }

/* MESAJ TABLOSU */
.msg-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.msg-table th {
  background: #e8cc8e; padding: 7px 10px; text-align: left;
  font-weight: 700; color: #1a0e00; border-bottom: 2px solid #c9a06a;
}
.msg-table-row td { padding: 8px 10px; border-bottom: 1px solid #ead8a0; cursor: pointer; }
.msg-table-row:hover td { background: #fff0c8; }
.msg-table-row.msg-unread td { background: #fffde0; font-weight: 700; }
.msg-subject-cell { max-width: 300px; }
.msg-from-cell { color: #5a3a10; white-space: nowrap; }
.msg-date-cell { color: #999; font-size: .8rem; white-space: nowrap; }
.msg-dot { color: #cc2200; margin-right: 4px; }

/* MESAJ YAZ FORMU */
.msg-compose { padding: 14px 16px; }
.msg-compose-title { font-size: 1rem; color: #1a0e00; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid #d2b77b; }
.msg-compose-form { display: flex; flex-direction: column; gap: 10px; }
.msg-compose-row { display: flex; align-items: flex-start; gap: 10px; }
.msg-compose-row label { font-weight: 700; color: #1a0e00; font-size: .88rem; min-width: 90px; padding-top: 6px; }
.msg-compose-row input, .msg-compose-row textarea {
  flex: 1; padding: 7px 10px; border: 1px solid #c9a06a; border-radius: 4px;
  font-family: Georgia,serif; font-size: .9rem; color: #1a0e00; background: #fff8e8;
}
.msg-compose-body-row textarea { resize: vertical; }
.msg-compose-actions { display: flex; gap: 8px; padding-left: 100px; }

/* ENGELLEME */
.msg-block-bar { margin-top: 16px; padding: 12px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; }
.msg-block-bar h4 { margin: 0 0 8px; font-size: .9rem; color: #1a0e00; }
.msg-block-form { display: flex; gap: 8px; }
.msg-block-form input {
  flex: 1; padding: 6px 10px; border: 1px solid #c9a06a; border-radius: 4px;
  font-family: Georgia,serif; font-size: .9rem; color: #1a0e00; background: #fff8e8;
}
.msg-block-page { padding: 14px 16px; }
.msg-circular { padding: 14px 16px; }

@media (max-width: 600px) {
  .msg-compose-row { flex-direction: column; }
  .msg-compose-row label { min-width: auto; padding-top: 0; }
  .msg-compose-actions { padding-left: 0; }
}

/* COMPOSE TOGGLE */
.compose-toggle {
  display: flex; gap: 0; border: 1px solid #c9a06a; border-radius: 5px;
  overflow: hidden; width: fit-content;
}
.compose-toggle-btn {
  padding: 7px 20px; background: #e8cc8e; border: 0;
  cursor: pointer; font-family: Georgia,serif; font-size: .88rem;
  font-weight: 700; color: #5a3a10;
}
.compose-toggle-btn.active {
  background: linear-gradient(180deg,#2b1b10,#1a0e06);
  color: #fff4d7;
}
.compose-toggle-btn:hover:not(.active) { background: #d8b878; }

/* SOHBET GÖRÜNÜMÜ */
.conv-wrap { display: flex; flex-direction: column; height: 100%; min-height: 500px; }

.conv-header {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: linear-gradient(180deg,#2b1b10,#1a0e06);
  color: #fff4d7; flex-shrink: 0;
}
.conv-title { font-weight: 700; font-size: 1rem; flex: 1; }
.conv-subject { font-size: .8rem; color: #a08050; }

.conv-messages {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: #fff8e8; max-height: 400px;
}

.conv-msg { max-width: 75%; display: flex; flex-direction: column; gap: 3px; }
.conv-mine { align-self: flex-end; }
.conv-theirs { align-self: flex-start; }

.conv-msg-header {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: #888;
}
.conv-msg-header b { color: #1a0e00; font-size: .82rem; }
.conv-msg-time { color: #aaa; font-size: .75rem; }

.conv-msg-body {
  padding: 8px 12px; border-radius: 8px;
  font-size: .9rem; line-height: 1.5; color: #1a0e00;
}
.conv-mine .conv-msg-body {
  background: linear-gradient(135deg,#2b1b10,#1a0e06);
  color: #fff4d7; border-radius: 12px 12px 2px 12px;
}
.conv-theirs .conv-msg-body {
  background: #fff0c8; border: 1px solid #d2b77b;
  border-radius: 12px 12px 12px 2px;
}

.conv-reply {
  border-top: 2px solid #d2b77b; padding: 12px 14px;
  background: #fff0c8; flex-shrink: 0;
}
.conv-reply-header { font-weight: 700; color: #1a0e00; font-size: .88rem; margin-bottom: 8px; }
.conv-reply textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #c9a06a;
  border-radius: 4px; font-family: Georgia,serif; font-size: .9rem;
  color: #1a0e00; background: #fff8e8; resize: vertical; box-sizing: border-box;
}
.conv-reply-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ── Konuşma Görünümü (openConversation) ─────────────────── */
.conv-view {
  display: flex; flex-direction: column;
  height: 100%; background: #fff8e8; overflow: hidden;
}
.conv-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: #2b1b10; color: #fff4d7;
  border-bottom: 2px solid #c9a06a; flex-shrink: 0;
}
.conv-back-btn {
  background: none; border: 1px solid #c9a06a; color: #fff4d7;
  border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: .85rem;
}
.conv-back-btn:hover { background: #4a2e14; }
.conv-partner-name { flex: 1; font-weight: 700; font-size: .95rem; }

/* İçerik: sol mesajlar + sağ yazma paneli */
.conv-body {
  display: flex; flex: 1; min-height: 0; overflow: hidden;
}
.conv-messages {
  flex: 1; overflow-y: scroll; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  max-width: 65%; border-right: 2px solid #d2b77b;
  min-height: 0; height: 100%;
}
.conv-empty { color: #888; font-style: italic; text-align: center; padding: 30px; }

/* Mesaj satırı — tribal wars tarzı kart */
.conv-msg-row {
  width: 100%; border: 1px solid #c9a06a; border-radius: 4px;
  flex-shrink: 0;
}
.conv-msg-row-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 10px; font-size: .82rem;
}
.conv-msg-mine .conv-msg-row-header { background: #2b1b10; color: #fff4d7; }
.conv-msg-theirs .conv-msg-row-header { background: #d8b878; color: #1a0e00; }
.conv-msg-row-header b { font-size: .85rem; }
.conv-msg-row-time { font-size: .75rem; opacity: .75; }
.conv-msg-row-body {
  padding: 8px 12px; font-size: .88rem; line-height: 1.6;
  color: #1a0e00; background: #fff8e8;
  word-break: break-word; white-space: pre-wrap;
  overflow-wrap: break-word; max-width: 100%;
}

/* Sağ yazma paneli */
.conv-compose {
  width: 35%; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; background: #fff0c8;
}
.conv-compose-label {
  font-weight: 700; font-size: .88rem; color: #1a0e00;
  border-bottom: 1px solid #d2b77b; padding-bottom: 6px;
}
.conv-compose textarea {
  flex: 1; padding: 10px; border: 1px solid #c9a06a;
  border-radius: 4px; font-family: Georgia,serif; font-size: .9rem;
  color: #1a0e00; background: #fff8e8; resize: none; min-height: 120px;
}
.conv-send-btn { width: 100%; }
.conv-char-count { font-size: .75rem; color: #888; text-align: right; margin-top: -4px; }

/* ── Oyuncu Autocomplete ─────────────────────────────────── */
.msg-autocomplete-wrap { position: relative; flex: 1; }
.msg-autocomplete-wrap input { width: 100%; box-sizing: border-box; }
.player-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 999;
  background: #fff8e8; border: 1px solid #c9a06a; border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15); max-height: 200px; overflow-y: auto;
}
.player-suggest-item {
  padding: 8px 12px; cursor: pointer; font-size: .88rem; color: #1a0e00;
  border-bottom: 1px solid #ead8a0;
}
.player-suggest-item:last-child { border-bottom: none; }
.player-suggest-item:hover { background: #fff0c8; }

/* Genel rapor satırı */
.report-row { border: 1px solid #c9a06a; border-radius: 4px; margin-bottom: 4px; overflow: hidden; background: #fff8e8; }
.rep-unread { border-left: 3px solid #c04000; }
.report-row-title { background: #d8b878; padding: 5px 10px; font-weight: 700; font-size: .88rem; color: #1a0e00; }
.report-row-body { padding: 8px 12px; font-size: .85rem; color: #1a0e00; }
.report-row-time { padding: 2px 12px 6px; font-size: .75rem; color: #888; }

/* ── Savaş Raporu Tablo ──────────────────────────────────── */
.rep-troop-grid { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: .82rem; }
.rep-tg-th { border: 1px solid #c9a06a; background: #2b1b10; color: #fff4d7; padding: 4px 8px; text-align: center; font-size: 1rem; min-width: 36px; }
.rep-tg-label { background: #d8b878; border: 1px solid #c9a06a; padding: 4px 8px; font-weight: 700; font-size: .8rem; color: #1a0e00; white-space: nowrap; }
.rep-tg-td { border: 1px solid #c9a06a; padding: 4px 8px; text-align: center; background: #fff8e8; color: #1a0e00; }
.rep-tg-loss { color: #c04000; font-weight: 700; }
.rep-tg-remain { color: #1a6e00; font-weight: 700; }
.rep-tg-zero { color: #bbb; background: #f8f4ec; }
.rep-troop-grid-empty { color: #888; font-style: italic; padding: 4px 8px; }
.rep-detail-meta { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 12px; background: #f5e8c0; border: 1px solid #c9a06a; border-radius: 4px; margin: 8px 0; font-size: .85rem; }
.rep-bonus-meta { background: #eef3e6; border-color: #8fae6f; }
.rep-bonus-meta small { color: #6b7a5a; font-weight: 400; margin-left: 4px; }

/* ═══ BİNA DETAY SAYFASI (pencere yerine) ═══ */
.building-page {
  background: #fff8e8;
  border: 1px solid #c9a06a;
  border-radius: 8px;
  min-height: 400px;
}
.building-page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #2b1b10;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid #c9a06a;
}
.building-page-back {
  background: none;
  border: 1px solid #c9a06a;
  color: #fff4d7;
  border-radius: 5px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
}
.building-page-back:hover { background: #4a2e14; }
.building-page-title { color: #fff4d7; font-size: 1.1rem; margin: 0; }
.building-page-content { padding: 16px; }

/* Köy adı değiştirme kutusu */
.village-rename-box {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  background: #fff0c8;
  border: 1px solid #d2b77b;
  border-radius: 6px;
}
.village-rename-box input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #c9a06a;
  border-radius: 5px;
  font-family: Georgia, serif;
  font-size: 0.9rem;
  color: #1a0e00;
  background: #fff8e8;
}

/* Ana bina bina tablosu */
.main-buildings-table-wrap {
  margin-top: 12px;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid #d2b77b;
  border-radius: 6px;
}
.main-buildings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.main-buildings-table thead th {
  position: sticky;
  top: 0;
  background: #2b1b10;
  color: #fff4d7;
  padding: 8px 10px;
  text-align: left;
  font-size: 0.8rem;
  z-index: 1;
}
.main-buildings-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #ead8a0;
  color: #1a0e00;
}
.main-buildings-table tbody tr:hover { background: #fff0c8; }
.main-buildings-table .construct-name { display: flex; align-items: center; gap: 6px; }
.main-row-locked { opacity: 0.65; background: #f5ece0; }
.main-req-mini { font-size: 0.72rem; color: #a05030; }
.main-done { color: #1a6e00; font-weight: 700; }

/* Kaynak/işçi yetersiz - kırmızı */
.construction-resource-cell.res-lacking {
  color: #cc2020;
  font-weight: 800;
}

/* Asker eğitimi çiftlik uyarısı */
.troop-pop-warn {
  color: #cc2020;
  font-weight: 700;
  font-size: 0.78rem;
}

/* Demirci araştırma kuyruğu */
.research-queue-box {
  background: #fff0c8;
  border: 1px solid #c7a56a;
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
}
.research-queue-box h3 {
  margin: 0 0 8px;
  color: #5a3a10;
  font-size: 0.95rem;
}
.research-queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff8e8;
  border: 1px solid #d2b77b;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.research-queue-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.research-queue-info .queue-time { color: #1a6e00; font-weight: 700; }
.smithy-item.queued {
  opacity: 0.8;
  border-color: #c8a020;
  background: #fff8e0;
}

/* Pazar sekmeleri */
.market-tabs {
  display: flex;
  gap: 6px;
  margin: 12px 0;
  border-bottom: 2px solid #c9a06a;
  padding-bottom: 0;
}
.market-tab {
  background: #ecd9a8;
  border: 1px solid #c9a06a;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #5a3a10;
  font-weight: 600;
}
.market-tab.active {
  background: #fff8e8;
  color: #1a0e00;
  margin-bottom: -2px;
  border-bottom: 2px solid #fff8e8;
}
.market-tab:hover { background: #f5e6c0; }
.npc-info {
  font-size: 0.82rem;
  color: #6e512d;
  background: #fff4d6;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 0 10px;
}
.npc-receive {
  background: #e8f4e0;
  border: 1px solid #a0c080;
  border-radius: 5px;
  padding: 8px 10px;
  color: #2a5a10;
  font-size: 0.9rem;
}
.send-form-group { margin-bottom: 10px; }
.send-form-group label { display: block; font-size: 0.82rem; color: #5a3a10; margin-bottom: 4px; }
.send-form-group input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #c9a06a;
  border-radius: 5px;
  font-family: Georgia, serif;
}
.send-res-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.send-res-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
}
.send-res-grid input {
  flex: 1;
  padding: 7px 8px;
  border: 1px solid #c9a06a;
  border-radius: 5px;
  font-family: Georgia, serif;
}

/* Koordinat girişi */
.coord-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.coord-input-row input {
  width: 90px;
  padding: 8px 10px;
  border: 1px solid #c9a06a;
  border-radius: 5px;
  font-family: Georgia, serif;
  text-align: center;
}
.coord-input-row span { font-weight: 700; color: #5a3a10; }

/* ═══ PAZAR (Travian tarzı) ═══ */
.merchant-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 0.85rem;
}
.merchant-table th {
  background: #e8c87a;
  color: #3d250d;
  padding: 7px 10px;
  text-align: left;
}
.merchant-table th.num, .merchant-table td.num { text-align: right; }
.merchant-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #e0c890;
  background: #fdf3d8;
  color: #3d250d;
}
.market-h {
  color: #6e3a10;
  font-size: 1.05rem;
  margin: 14px 0 8px;
}
.send-table, .offer-prep-table, .my-offers-table, .other-offers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.send-table th, .my-offers-table th, .other-offers-table th {
  background: #e8c87a;
  color: #3d250d;
  padding: 7px 10px;
  text-align: left;
}
.send-table td { padding: 10px; border: 1px solid #e0c890; background: #fdf3d8; vertical-align: top; }
.send-res-line { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.send-res-line input { width: 110px; padding: 6px 8px; border: 1px solid #c9a06a; border-radius: 4px; }
.send-res-line small { color: #8a6a3a; }
.send-coord-line { margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.coord-sm { width: 70px; padding: 6px 8px; border: 1px solid #c9a06a; border-radius: 4px; text-align: center; }
.btn-market-send {
  background: #7a5018;
  color: #fff4d7;
  border: 1px solid #5a3a10;
  border-radius: 5px;
  padding: 7px 16px;
  cursor: pointer;
  font-size: 0.85rem;
}
.btn-market-send:hover { background: #8a5e20; }
.offer-prep-table td { padding: 7px 8px; border: 1px solid #e0c890; background: #fdf3d8; }
.offer-prep-table .opl { font-weight: 600; color: #3d250d; width: 110px; }
.offer-prep-table input[type="number"] { width: 90px; padding: 6px 8px; border: 1px solid #c9a06a; border-radius: 4px; }
.offer-prep-table .ores label { margin-right: 10px; cursor: pointer; }
.my-offers-table td, .other-offers-table td {
  padding: 7px 10px; border-bottom: 1px solid #e0c890; background: #fdf3d8; color: #3d250d;
}
.btn-cancel-sm {
  background: #8a2020; color: #fff; border: none; border-radius: 4px;
  padding: 4px 12px; cursor: pointer; font-size: 0.8rem;
}
.btn-cancel-sm:hover { background: #a52828; }
.other-offers-table .offer-status.disabled { color: #999; font-size: 0.8rem; }

/* Yakut ikonu (SVG) hizalama */
.res-icon-yakut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.res-icon-yakut svg { display: block; }

/* Savaş raporu kuşatma/sadakat */
.rep-siege { border-left: 4px solid #b8800f; }
.rep-loyalty { border-left: 4px solid #8a2be2; }
.siege-line {
  font-size: 0.9rem;
  color: #3d250d;
  margin: 4px 0;
}
.siege-drop { color: #cc2020; font-weight: 700; }
.capture-msg {
  margin-top: 6px;
  padding: 8px 12px;
  background: #4a2020;
  color: #ffd700;
  border-radius: 6px;
  font-weight: 800;
  text-align: center;
  font-size: 1rem;
}

/* Mancınık hedef bina seçici */
.cat-target-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #c9a06a;
  border-radius: 5px;
  font-family: Georgia, serif;
  font-size: 0.9rem;
  background: #fff8e8;
  color: #1a0e00;
}

/* Rapor tablosu - kaynak/işçi sütunları */
.rep-tg-sep { border-left: 2px solid #c9a06a !important; }
.rep-tg-res { font-size: 0.78rem; color: #5a3a10; background: #fdf6e3; }
.rep-troop-grid .rep-tg-loss.rep-tg-res { color: #cc2020; }

/* Simülatör kuşatma kutusu */
.sim-siege-box {
  background: #fff0c8;
  border: 1px solid #c8a020;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0;
  font-size: 0.88rem;
  color: #3d250d;
}
.sim-siege-box div { margin: 2px 0; }

/* Simülatör sonuç - kaynak sütun ayracı */
.sim-detail-table .sim-sep-th,
.sim-detail-table .sim-sep-td { border-left: 2px solid #c9a06a !important; }

/* Simülatöre Ekle butonları */
.sim-add-btn {
  margin-top: 8px;
  width: 100%;
  background: #2d5a3d;
  color: #e8f4e0;
  border: 1px solid #1d4a2d;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}
.sim-add-btn:hover { background: #3d6a4d; }
.sim-add-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.sim-add-btn-sm {
  flex: 1;
  min-width: 140px;
  background: #5a4018;
  color: #fff4d7;
  border: 1px solid #4a3010;
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.76rem;
}
.sim-add-btn-sm:hover { background: #6a5020; }

/* Köy seçici */
.village-selector {
  padding: 8px 12px;
  border: 2px solid #c9a06a;
  border-radius: 8px;
  background: #fff8e8;
  color: #3d250d;
  font-family: Georgia, serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 280px;
}
.village-selector:hover { border-color: #b8800f; }

/* ═══ KÖY NAVİGASYON BARI ═══ */
.village-nav-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(to bottom, #4a3018, #3a2410);
  border-bottom: 2px solid #5a3a10;
  color: #f0d9a8;
  font-size: 0.92rem;
  flex-wrap: wrap;
}
.vnav-link {
  color: #f0d9a8;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
}
.vnav-link:hover { color: #fff; text-decoration: underline; }
.vnav-sep { color: #8a6a3a; }
.vnav-arrow {
  background: #5a3a18;
  color: #f0d9a8;
  border: 1px solid #7a5028;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 0.85rem;
  display: none;
}
.vnav-arrow:hover { background: #6a4a20; }
.vnav-village-name { font-weight: 700; color: #fff; }
.vnav-village-coord { color: #c8a878; font-size: 0.85rem; }

/* ═══ GENEL BAKIŞ TABLOSU ═══ */
.overview-wrap { padding: 16px; max-width: 1100px; margin: 0 auto; }
.overview-title {
  color: #5a3a10;
  font-size: 1.3rem;
  margin-bottom: 14px;
}
.overview-table {
  width: 100%;
  border-collapse: collapse;
  background: #fdf6e3;
  font-size: 0.88rem;
}
.overview-table th {
  background: #d8b878;
  color: #3d250d;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid #c9a06a;
  font-weight: 700;
}
.overview-table td {
  padding: 9px 12px;
  border: 1px solid #e0c890;
  color: #3d250d;
}
.overview-table .ov-num { text-align: right; }
.ov-active-row { background: #fff0c8; }
.ov-active-row .ov-name { font-weight: 700; }
.ov-village-link {
  color: #7a3a10;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
}
.ov-village-link:hover { color: #a04010; text-decoration: underline; }
.ov-coord { color: #8a6a3a; font-size: 0.82rem; margin-left: 4px; }
.ov-loyalty {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: #8a2be2;
  color: #fff;
  border-radius: 3px;
  font-size: 0.72rem;
}
.ov-construction { color: #6a5028; font-size: 0.84rem; }
.overview-table tbody tr:hover { background: #fdeecb; }

/* Liderboard klan rozeti */
.lb-clan { color: #7a3a10; font-weight: 700; }
.lb-rank { font-size: 1.1rem; text-align: center; }
.lb-num { text-align: right; }

/* Genel bakış - sıralama + toplam */
.ov-sortable { cursor: pointer; user-select: none; }
.ov-sortable:hover { background: #c9a05a; }
.ov-total-row td {
  background: #e8d4a0 !important;
  border-top: 2px solid #b8800f;
  font-weight: 700;
}

/* Yakut Damarı hotspot */
.hs-ruby_vein { left: 62%; top: 24%; }

/* Genel bakış inşaat simgeleri */
.ov-build-icon {
  display: inline-block;
  font-size: 1.1rem;
  margin-right: 3px;
}
.ov-build-icon sub { font-size: 0.65rem; color: #7a3a10; font-weight: 700; }

/* Harita kaynak gönder butonu */
.ks-action-btn.ks-transport {
  background: #2d6a4d;
  color: #e0f4e8;
  border-color: #1d5a3d;
}
.ks-action-btn.ks-transport:hover { background: #3d7a5d; }

/* Bina resimleri (hotspot) */
.hs-image-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.hs-building-img {
  position: absolute;
  width: 56px;
  height: 56px;
  object-fit: contain;
  transform: translate(-50%, -55%);
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4));
}

/* Bina detay büyük ikonu resimken */
.building-entry-icon img { display: block; }

.troop-img { height: 1.3em; width: auto; vertical-align: middle; object-fit: contain; }

/* ── Köy şeması çevresi: tarla görünümü (placeholder — kullanıcı tarla resmi gelince background swap) ── */
#village-default-view {
  background:
    radial-gradient(circle at 50% 42%, rgba(140,165,85,.20), transparent 62%),
    repeating-linear-gradient(122deg, rgba(255,255,255,.028) 0 30px, rgba(0,0,0,.035) 30px 60px),
    linear-gradient(180deg, #4f6630 0%, #44582780 55%, #3a4d22 100%);
  border-radius: 12px;
  padding: 8px 0 16px;
}
.village-hero {
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,.42);
}

/* =========================================================
   SANCAK SAVAŞLARI - SİNEMATİK GİRİŞ EKRANI V1
   Dosya: public/assets/login-sancak-savaslari.png
   Not: Bu blok eski auth tasarımını ezmek için dosyanın sonundadır.
   ========================================================= */
#auth-screen {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 58%, rgba(0,0,0,0.0), rgba(0,0,0,0.55) 78%),
    #2a2118 url("assets/login-sancak-savaslari.png") center center / contain no-repeat !important;
  background-blend-mode: normal, screen;
  padding: 0 !important;
}

#auth-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62), transparent 23%, transparent 77%, rgba(0,0,0,.62)),
    linear-gradient(180deg, rgba(0,0,0,.12), transparent 38%, rgba(0,0,0,.18));
  pointer-events: none;
}

#auth-screen .auth-box {
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translate(-50%, -50%);
  width: min(286px, 78vw) !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ead8a5 !important;
  z-index: 2;
}

#auth-screen .auth-box h1,
#auth-screen .auth-box .subtitle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#auth-screen .tab-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 10px 0 !important;
}

#auth-screen .tab-btn {
  height: 34px;
  border-radius: 4px;
  border: 1px solid rgba(205, 162, 71, .75) !important;
  background: linear-gradient(180deg, rgba(37,28,18,.78), rgba(14,10,7,.88)) !important;
  color: #d9bf78 !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  text-shadow: 0 1px 2px #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.35);
}

#auth-screen .tab-btn.active {
  background: linear-gradient(180deg, #8c1712, #5e0e0c) !important;
  color: #ffe9a8 !important;
  border-color: #e0b45a !important;
}

#auth-screen .auth-form input {
  height: 38px;
  width: 100%;
  margin-bottom: 9px !important;
  padding: 0 14px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(170, 132, 63, .7) !important;
  background: rgba(12, 9, 6, .76) !important;
  color: #f2dfad !important;
  font-size: 14px;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.55);
}

#auth-screen .auth-form input::placeholder {
  color: rgba(226, 199, 142, .62);
}

#auth-screen .auth-form input:focus {
  outline: none;
  border-color: #f2c76b !important;
  box-shadow: 0 0 0 2px rgba(199, 155, 73, .22), inset 0 1px 8px rgba(0,0,0,.55);
}

#auth-screen .btn-primary {
  height: 42px;
  padding: 0 !important;
  border-radius: 4px !important;
  border: 1px solid #e2b65c !important;
  background: linear-gradient(180deg, #bd2b20, #74120e) !important;
  color: #ffe8a6 !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px !important;
  font-weight: 800;
  letter-spacing: .8px;
  text-shadow: 0 2px 2px #280602;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.45);
}

#auth-screen #register-form .btn-primary {
  background: linear-gradient(180deg, #31537b, #152c49) !important;
}

#auth-screen .msg {
  margin-top: 8px !important;
  border-radius: 4px;
  border: 1px solid rgba(218, 173, 80, .35);
  background: rgba(13, 10, 7, .82);
  color: #f4dc9b;
}

#auth-screen .msg.error {
  border-color: rgba(187, 52, 45, .75);
  background: rgba(66, 10, 8, .86);
  color: #ffb2aa;
}

#auth-screen .msg.success {
  border-color: rgba(80, 170, 88, .7);
  background: rgba(8, 56, 22, .86);
  color: #b8ffbe;
}

@media (max-width: 700px) {
  #auth-screen {
    background-size: cover !important;
    background-position: center center !important;
  }
  #auth-screen .auth-box {
    top: 64%;
    width: min(286px, 82vw) !important;
  }
}

@media (max-height: 720px) {
  #auth-screen .auth-box { top: 66%; transform: translate(-50%, -50%) scale(.92); }
}

@media (max-height: 620px) {
  #auth-screen .auth-box { top: 66%; transform: translate(-50%, -50%) scale(.82); }
}

/* Marka güncellemesi */
.logo { font-family: Georgia, 'Times New Roman', serif; letter-spacing: .4px; }


/* ===== DÜNYA SEÇİMİ / LOBİ ===== */
body.world-mode {
  background:#0b0704;
  overflow:auto;
}
#world-screen {
  min-height:100vh;
  background:
    radial-gradient(circle at center, rgba(150,96,35,.18), rgba(0,0,0,.92) 70%),
    linear-gradient(180deg,#120905,#050302);
  color:#2b1608;
  font-family: Georgia, 'Times New Roman', serif;
}
.world-shell {
  width:min(1380px, 100%);
  min-height:100vh;
  margin:0 auto;
  background:#130b06;
  border-left:2px solid rgba(196,145,62,.55);
  border-right:2px solid rgba(196,145,62,.55);
  box-shadow:0 0 80px rgba(0,0,0,.8);
}
.world-top-nav {
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  color:#f5dfae;
  font-size:20px;
  font-weight:bold;
  background:linear-gradient(#3b160d,#1f0c07);
  border-bottom:3px solid #b4873d;
  text-shadow:0 2px 2px #000;
}
.world-top-nav button {
  background:none; border:0; color:#f5dfae; font:inherit; cursor:pointer;
}
.world-hero {
  height:310px;
  background:
    linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.16)),
    url('assets/login-sancak-savaslari.png') center 18% / cover no-repeat;
  position:relative;
  border-bottom:3px solid #9b6d2d;
}
.world-hero::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 25%,transparent 75%,rgba(0,0,0,.25));
}
.world-hero-title { display:none; }
.world-main-panel {
  position:relative;
  display:grid;
  grid-template-columns: 250px 1fr 1fr;
  gap:0;
  min-height:520px;
  background:#efe0bb;
  border-top:1px solid #dfbc72;
}
.world-character {
  background:
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.2)),
    url('assets/login-sancak-savaslari.png') 10% 75% / 740px auto no-repeat;
  border-right:2px solid #9b6d2d;
}
.world-info-panel, .world-select-panel {
  padding:34px 38px;
  background:linear-gradient(180deg,#f6e9c8,#ead7a8);
  border-right:2px solid #9b6d2d;
  color:#241307;
}
.world-info-panel h2, .world-select-panel h2 {
  font-size:34px;
  color:#1d0f06;
  margin-bottom:18px;
  text-shadow:0 1px #fff0c7;
}
.world-select-panel h2 span { font-size:28px; }
.world-info-panel p, .world-select-panel p {
  font-size:18px; line-height:1.35; margin:10px 0;
}
.world-select-panel p button {
  color:#8d250e; background:none; border:0; font-weight:bold; cursor:pointer; font:inherit;
}
.world-red-btn {
  width:100%;
  margin:22px 0;
  padding:15px;
  background:linear-gradient(#c21d14,#7e0b07);
  color:#fff5cf;
  border:3px solid #a97924;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12), 0 3px 5px rgba(0,0,0,.35);
  font-size:25px;
  font-weight:bold;
  font-family:Georgia,'Times New Roman',serif;
  cursor:pointer;
}
.world-preview-row { display:flex; gap:14px; margin-top:12px; }
.world-preview-card {
  flex:1; aspect-ratio:1.15;
  display:flex; align-items:end; justify-content:center;
  padding:10px;
  background:linear-gradient(145deg,#506c30,#1f2a16);
  border:3px solid #b58b41;
  color:#fff1bf;
  font-weight:bold;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.world-select-panel h3 {
  font-size:22px;
  margin:22px 0 12px;
  border-bottom:1px solid rgba(98,64,23,.35);
  padding-bottom:8px;
}
.world-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.world-btn {
  min-height:62px;
  padding:10px 12px;
  background:linear-gradient(#f1dfad,#cdb27b);
  border:3px solid #9b7436;
  color:#4a2a0d;
  font-family:Georgia,'Times New Roman',serif;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 2px 5px rgba(0,0,0,.22);
  text-align:center;
}
.world-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.world-btn strong { display:block; font-size:22px; }
.world-btn small { display:block; font-size:13px; color:#715123; margin-top:4px; }
.world-note {
  margin-top:22px!important;
  font-size:15px!important;
  color:#6c4a1c;
  padding:12px;
  border:1px solid rgba(111,76,24,.35);
  background:rgba(255,255,255,.16);
}
@media (max-width:900px) {
  .world-shell { border:0; }
  .world-top-nav { overflow:auto; justify-content:flex-start; padding:0 12px; font-size:15px; gap:10px; }
  .world-hero { height:210px; }
  .world-main-panel { grid-template-columns:1fr; }
  .world-character { display:none; }
  .world-info-panel, .world-select-panel { border-right:0; border-bottom:2px solid #9b6d2d; padding:24px 18px; }
  .world-list { grid-template-columns:1fr; }
}


/* ===== Sancak Savaşları - Dünya Seçim Portalı V2 ===== */
body.world-mode {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at center, rgba(70, 40, 18, .35), rgba(0,0,0,.96) 70%),
    #050403 !important;
  overflow: auto;
}
body.world-mode #auth-screen,
body.world-mode #game-screen { display: none !important; }
#world-screen {
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: start center;
  padding: 0;
  background: #050403;
  font-family: Georgia, 'Times New Roman', serif;
}
.world-portal-canvas {
  position: relative;
  width: min(96vw, 1536px);
  aspect-ratio: 1536 / 1024;
  min-height: 650px;
  background:
    linear-gradient(rgba(0,0,0,.04), rgba(0,0,0,.04)),
    url("assets/world-portal-bg.png") center top / cover no-repeat;
  border: 3px solid #8a5a1d;
  box-shadow: 0 0 55px rgba(0,0,0,.85), inset 0 0 20px rgba(255,210,120,.15);
  overflow: hidden;
}
.world-top-nav {
  position: absolute;
  left: 5.5%;
  right: 5.5%;
  top: 0.4%;
  height: 5.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 18px);
  color: #f7e7bd;
  background: rgba(65, 17, 11, .90);
  border: 1px solid rgba(218, 171, 78, .8);
  border-top: 0;
  font-size: clamp(14px, 1.35vw, 22px);
  font-weight: 700;
  text-shadow: 0 2px 3px #000;
  z-index: 5;
}
.world-top-nav button {
  border: 0;
  background: transparent;
  color: #f7e7bd;
  font: inherit;
  cursor: pointer;
}
.world-left-copy,
.world-right-copy {
  position: absolute;
  top: 41%;
  bottom: 10.2%;
  color: #1e1005;
  z-index: 4;
  padding: clamp(16px, 2vw, 32px);
  background: rgba(237, 213, 164, .83);
  border: 1px solid rgba(117, 76, 28, .6);
  box-shadow: inset 0 0 18px rgba(255,255,255,.18);
}
.world-left-copy { left: 25.3%; width: 30.3%; }
.world-right-copy { left: 57%; width: 33.3%; }
.world-left-copy h2,
.world-right-copy h2 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.2vw, 38px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .5px;
}
.world-right-copy h2 span { font-size: .82em; }
.world-left-copy p,
.world-right-copy p {
  font-size: clamp(13px, 1.1vw, 18px);
  line-height: 1.34;
  margin: 0 0 12px;
  font-weight: 600;
}
.world-right-copy p button {
  border: 0;
  background: none;
  color: #9a270e;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.world-red-btn {
  width: 86%;
  margin: 12px 0 18px;
  padding: clamp(10px, 1.1vw, 16px) 18px;
  border: 3px solid #8e5a24;
  background: linear-gradient(#d8291b, #8f0905);
  color: #fff2c8;
  box-shadow: 0 4px 0 #48210d, 0 0 14px rgba(0,0,0,.45);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 900;
  font-size: clamp(15px, 1.5vw, 25px);
  letter-spacing: .5px;
  text-shadow: 0 2px 2px #000;
  cursor: pointer;
}
.world-left-copy h3,
.world-right-copy h3 {
  margin: 8px 0 10px;
  font-size: clamp(15px, 1.3vw, 24px);
  font-weight: 900;
}
.world-preview-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(7px, .9vw, 14px);
}
.world-preview-card {
  position: relative;
  aspect-ratio: 1 / .82;
  display: flex;
  align-items: end;
  justify-content: center;
  border: 3px solid #9c7b37;
  background: #405a23;
  overflow: hidden;
  color: #fff5c4;
  font-weight: 900;
  text-shadow: 0 2px 2px #000;
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.world-preview-card span { position: relative; z-index: 2; padding: 0 0 8px; }
.world-preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0,0,0,.60));
}
.world-preview-village { background: url("assets/village-bg.png") center/cover, #405a23; }
.world-preview-army { background: url("../images/troops/sipahi.png") center/cover, #4d3b1f; }
.world-preview-map { background: url("assets/world-map-bg-v3.png") center/cover, #405a23; }
.world-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
  margin: 8px 0 18px;
}
.world-btn.world-card {
  position: relative;
  min-height: clamp(70px, 6.3vw, 104px);
  padding: 12px 12px 12px 56px;
  border: 3px solid #986d2e;
  background: linear-gradient(#ead29b, #c49a56);
  color: #2a1606;
  box-shadow: 0 3px 0 #6b4317, inset 0 0 0 2px rgba(255,245,190,.45);
  cursor: pointer;
  text-align: left;
  font-family: Georgia, 'Times New Roman', serif;
  transition: transform .12s ease, filter .12s ease;
}
.world-btn.world-card:hover { transform: translateY(-2px); filter: brightness(1.07); }
.world-btn.world-card strong {
  display: block;
  font-size: clamp(17px, 1.55vw, 28px);
  line-height: 1;
  font-weight: 900;
}
.world-btn.world-card small {
  display: block;
  margin-top: 4px;
  color: #6b4015;
  font-size: clamp(11px, .9vw, 15px);
  font-weight: 700;
}
.world-btn.world-card em {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 8px;
  font-style: normal;
  background: #7d170e;
  color: #f9e8b1;
  border: 1px solid #d8b76a;
  font-size: clamp(10px, .75vw, 12px);
  letter-spacing: .5px;
}
.world-card-badge {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #7d170e;
  color: #f7d67c;
  border: 2px solid #d1a34f;
  font-weight: 900;
}
.world-note {
  border: 1px solid rgba(151,103,44,.6);
  background: rgba(255, 240, 202, .55);
  padding: 12px 14px;
  font-size: clamp(12px, .95vw, 16px) !important;
}

@media (max-width: 900px) {
  #world-screen { place-items: start center; }
  .world-portal-canvas {
    width: 100%;
    min-height: 100vh;
    aspect-ratio: auto;
    background: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)), url("assets/world-portal-bg.png") center top / cover no-repeat;
    border: 0;
    overflow: auto;
    padding-top: 170px;
  }
  .world-top-nav { left: 0; right: 0; top: 0; height: 44px; overflow-x: auto; justify-content: flex-start; padding: 0 12px; }
  .world-left-copy, .world-right-copy {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: min(92vw, 520px);
    margin: 0 auto 18px;
    padding: 20px;
  }
  .world-list { grid-template-columns: 1fr; }
}

/* ===== Dünya Portalı V3 - temiz panel düzeltmesi ===== */
body.world-mode #auth-screen,
body.world-mode #game-screen { display: none !important; }

.world-portal-canvas {
  background: url("assets/world-portal-bg.png") center top / cover no-repeat !important;
}

.world-left-copy,
.world-right-copy {
  top: 36.3% !important;
  bottom: 9.2% !important;
  background:
    linear-gradient(180deg, rgba(252,236,196,.98), rgba(230,200,142,.98)) !important;
  border: 2px solid #8c5e22 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,246,208,.65),
    inset 0 0 34px rgba(112,70,24,.22),
    0 10px 24px rgba(0,0,0,.35) !important;
  padding: clamp(18px, 1.8vw, 28px) !important;
  overflow: hidden;
}

.world-left-copy {
  left: 24.0% !important;
  width: 33.2% !important;
}

.world-right-copy {
  left: 58.6% !important;
  width: 35.5% !important;
}

.portal-panel-title,
.world-user-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin: 0 0 14px;
  padding: 8px 13px;
  background: linear-gradient(180deg, #3b190e, #1d0b05);
  border: 1px solid #b1843d;
  color: #f6df9a;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(18px, 1.65vw, 30px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .3px;
  text-shadow: 0 2px 2px #000;
  box-shadow: inset 0 0 10px rgba(255,205,100,.13), 0 3px 8px rgba(0,0,0,.22);
}

.world-left-copy > h2,
.world-right-copy > h2 { display: none !important; }

.world-left-copy p,
.world-right-copy p {
  color: #2a1606 !important;
  font-size: clamp(13px, 1vw, 17px) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

.world-exit-line {
  padding-bottom: 11px;
  margin-bottom: 13px !important;
  border-bottom: 1px solid rgba(132,85,32,.35);
}

.world-left-copy h3,
.world-right-copy h3 {
  color: #2a1606 !important;
  font-size: clamp(18px, 1.35vw, 25px) !important;
  margin: 10px 0 12px !important;
  text-shadow: none !important;
}

.world-red-btn {
  width: 100% !important;
  margin: 12px 0 16px !important;
}

.world-preview-row {
  gap: clamp(10px, .75vw, 13px) !important;
}

.world-preview-card {
  aspect-ratio: 1 / .86 !important;
  border: 3px solid #8a6728 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.35) !important;
}

.world-list {
  margin-top: 8px !important;
  gap: clamp(10px, .9vw, 14px) !important;
}

.world-btn.world-card {
  min-height: clamp(86px, 7.2vw, 118px) !important;
  background: linear-gradient(180deg, #ecd092, #c89948) !important;
}

.world-note {
  margin-top: 12px !important;
  background: rgba(255,244,210,.72) !important;
  color: #3b2108 !important;
}

@media (max-width: 900px) {
  .world-portal-canvas {
    padding-top: 185px !important;
    background: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22)), url("assets/world-portal-bg.png") center top / cover no-repeat !important;
  }
  .world-left-copy,
  .world-right-copy {
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: min(94vw, 560px) !important;
  }
}


/* ══════════ PREMIUM MARKET ══════════ */
.pm-wrap{background:#080604;border-radius:8px;overflow:hidden}
.pm-wrap{position:relative;overflow:hidden;background:linear-gradient(180deg,#1a140e,#14100a,#18130c);width:100%}
#tab-premium { padding:0; margin:0; }
#tab-premium.tab-content { min-height:auto; }
.pm-banner{width:100%;height:150px;overflow:hidden;background:#0e0a06}
.pm-banner img{width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block}
.pm-sultan-right{position:fixed;top:70px;right:8px;width:120px;height:calc(100vh - 70px);z-index:50;pointer-events:none;overflow:hidden}
.pm-sultan-right{right:0}
.pm-sultan-right img{width:100%;height:100%;object-fit:cover;object-position:top center;opacity:.75}
.pm-sultan-right img{transform:scaleX(-1)}
.pm-header-compact{text-align:center;padding:6px 0;background:linear-gradient(90deg,transparent 10%,rgba(10,6,4,.9) 30%,rgba(10,6,4,.95) 50%,rgba(10,6,4,.9) 70%,transparent 90%);position:relative;z-index:2}
.pm-header-label{font-size:1rem;font-weight:900;color:#c9a84c;letter-spacing:3px}
.pm-balance{display:flex;gap:16px;padding:8px 22px;background:linear-gradient(90deg,rgba(26,58,143,.1),rgba(139,32,32,.05));border-bottom:1px solid rgba(201,168,76,.2);position:relative;z-index:2}
.pm-bal{font-size:.78rem;color:#9a8b72}.pm-bal b{color:#e8d48b;margin-left:4px}
.pm-tabs{display:flex;gap:2px;padding:0 22px;background:rgba(30,22,14,.85);border-bottom:1px solid rgba(201,168,76,.2);overflow-x:auto;position:relative;z-index:2}
.pm-tab{padding:10px 14px;font-size:.7rem;font-weight:600;color:#9a8b72;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;user-select:none;transition:all .2s}
.pm-tab:hover{color:#e8d48b}.pm-tab.active{color:#c9a84c;border-bottom-color:#c9a84c;background:rgba(201,168,76,.06)}
.pm-body{padding:16px 22px;margin-right:130px;min-height:400px;position:relative;z-index:2}
.pm-tab-content{display:none}.pm-tab-content.pm-active{display:block}
.pm-sec{font-size:.9rem;font-weight:700;color:#c9a84c;margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid rgba(201,168,76,.2)}
.pm-sec:first-child{margin-top:0}

/* Diamond grid */
.pm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pm-card{background:#201810;border:1px solid rgba(201,168,76,.25);border-radius:8px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .25s;position:relative;overflow:hidden}
.pm-card::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,rgba(26,58,143,.1),transparent 70%);pointer-events:none}
.pm-card:hover{background:#221a12;border-color:rgba(201,168,76,.5);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.pm-kral{border-color:#c9a84c;box-shadow:0 0 16px rgba(201,168,76,.3)}
.pm-card-title{font-size:.78rem;font-weight:700;color:#e8d48b;margin-bottom:6px}
.pm-chest{height:70px;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.pm-gem-pile{position:relative;width:70px;height:55px}
.pm-gem{position:absolute;width:14px;height:18px;background:linear-gradient(135deg,#0d2b6e,#1a4cc0 30%,#4488ee 50%,#1a4cc0 70%,#0d2b6e);clip-path:polygon(50% 0%,100% 35%,80% 100%,20% 100%,0% 35%);animation:pmGlow 2s ease-in-out infinite alternate}
.pm-gem:nth-child(1){left:26px;top:6px;transform:rotate(-8deg)}.pm-gem:nth-child(2){left:38px;top:2px;transform:rotate(12deg);animation-delay:.3s}
.pm-gem:nth-child(3){left:18px;top:20px;transform:rotate(5deg);animation-delay:.6s}.pm-gem:nth-child(4){left:34px;top:18px;transform:rotate(-15deg);animation-delay:.2s}
.pm-gem:nth-child(5){left:48px;top:12px;transform:rotate(20deg);animation-delay:.5s}.pm-gem:nth-child(6){left:12px;top:10px;animation-delay:.4s;width:11px;height:14px}
.pm-gem:nth-child(7){left:52px;top:22px;animation-delay:.7s;width:11px;height:14px}
.pm-chest-box{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:58px;height:28px;background:linear-gradient(180deg,#3a2810,#1a0e04);border:2px solid #5a3a18;border-radius:3px 3px 5px 5px}
.pm-chest-box::before{content:"";position:absolute;top:0;left:0;right:0;height:9px;background:linear-gradient(180deg,#6d4e1e,#4a3010);border-bottom:1px solid #3a2008}
.pm-chest-box::after{content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);width:7px;height:6px;background:#c9a84c;border-radius:2px}
@keyframes pmGlow{0%{filter:brightness(1)}100%{filter:brightness(1.3)}}
.pm-price{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#1a1208,#2a1f10);border:1px solid #6d4e1e;border-radius:4px;padding:4px 10px;font-weight:700;font-size:.78rem;color:#e8d48b}

/* Item cards */
.pm-items{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px}
.pm-military-reset{display:flex;justify-content:center;margin:4px 0 14px}
.pm-military-reset .btn-test{padding:8px 16px;font-size:0.85rem}
.pm-item{background:#201810;border:1px solid rgba(201,168,76,.2);border-radius:8px;padding:14px;cursor:pointer;transition:all .2s}
.pm-item:hover{border-color:rgba(201,168,76,.45);transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.pm-item-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pm-item-icon{width:38px;height:38px;background:linear-gradient(135deg,#2a1a08,#3a2810);border:1px solid #5a3a18;border-radius:6px;display:grid;place-items:center;font-size:1.2rem;flex-shrink:0}
.pm-item-title{font-size:.82rem;font-weight:700;color:#fff4d7}
.pm-item-sub{font-size:.65rem;color:#9a8b72;margin-top:1px}
.pm-item-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.pm-tag{padding:3px 8px;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.18);border-radius:3px;font-size:.65rem;color:#e8d48b}
.pm-item-foot{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.05);flex-wrap:wrap}
.pm-item-price{font-weight:700;font-size:.85rem;color:#c9a84c}
.pm-cd{font-size:.6rem;color:#9a8b72}
.pm-buy-btn{margin-left:auto;padding:5px 14px;border:none;border-radius:4px;font-weight:700;font-size:.7rem;cursor:pointer;background:linear-gradient(135deg,#8b6914,#c9a84c);color:#1a0e00;transition:all .2s}
.pm-buy-btn:hover{background:linear-gradient(135deg,#c9a84c,#e8d48b);box-shadow:0 0 10px rgba(201,168,76,.35)}

/* Shields */
.pm-shields{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
.pm-shield{background:#201810;border:1px solid rgba(201,168,76,.2);border-radius:8px;padding:12px;text-align:center;cursor:pointer;transition:all .2s}
.pm-shield:hover{border-color:rgba(201,168,76,.45);transform:translateY(-2px)}
.pm-shield-icon{font-size:1.6rem;margin-bottom:4px}
.pm-shield-dur{font-size:.82rem;font-weight:700;color:#fff4d7;margin-bottom:2px}
.pm-shield-price{font-size:.75rem;color:#c9a84c;font-weight:600}

/* Rules box */
.pm-rules{padding:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:6px;font-size:.7rem;color:#9a8b72;line-height:1.7;margin-bottom:10px}
.pm-rules b{color:#e8dcc8;display:block;margin-bottom:4px;font-size:.75rem}

/* Bottom trust */
.pm-bottom{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 22px;background:rgba(30,22,14,.85);border-top:1px solid rgba(201,168,76,.2);position:relative;z-index:2}
.pm-trust{display:flex;align-items:flex-start;gap:6px;font-size:.62rem;color:#9a8b72;line-height:1.3}
.pm-trust>span{font-size:.9rem;flex-shrink:0}
.pm-trust b{display:block;color:#e8dcc8;font-size:.68rem}

@media(max-width:1000px){.pm-sultan-right{display:none !important;position:static}.pm-body{margin-right:0}}@media(max-width:900px){.pm-grid,.pm-shields{grid-template-columns:repeat(2,1fr)}.pm-items{grid-template-columns:1fr}.pm-bottom{grid-template-columns:repeat(2,1fr)}}

/* Orta govde tema V5: sadece oyun ici. Giris, dunya ve premium ekranlarini bozmaz. */
:root {
  --ks-shell-width: 1060px;
  --ks-bg-a: #77705d;
  --ks-bg-b: #5e5949;
  --ks-paper: #f4dfad;
  --ks-paper-light: #fff1cf;
  --ks-paper-row: #f2d9a5;
  --ks-line: #b89458;
  --ks-dark: #21190e;
  --ks-dark-2: #111007;
  --ks-gold: #d1a04c;
  --ks-ink: #2a1608;
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at 14px 18px, rgba(255,255,255,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 38px 42px, rgba(0,0,0,.08) 0 1px, transparent 2px),
    linear-gradient(135deg, var(--ks-bg-a), var(--ks-bg-b)) !important;
  background-size: 54px 54px, 54px 54px, auto !important;
}

body {
  background: transparent !important;
}

body:not(.world-mode)::before {
  content: "";
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 14px 18px, rgba(255,255,255,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 38px 42px, rgba(0,0,0,.08) 0 1px, transparent 2px),
    linear-gradient(135deg, var(--ks-bg-a), var(--ks-bg-b));
  background-size: 54px 54px, 54px 54px, auto;
}

body:not(.world-mode)::after {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0,0,0,.08) 1px, transparent 1px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px);
  background-size: 96px 96px, 96px 96px, auto;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 24%, transparent 42%, transparent 58%, #000 76%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 24%, transparent 42%, transparent 58%, #000 76%, #000 100%);
}

body.world-mode::before,
body.world-mode::after {
  display: none !important;
}

#game-screen {
  width: min(var(--ks-shell-width), 100vw);
  min-height: 100vh;
  margin: 0 auto !important;
  background: var(--ks-paper) !important;
  border-left: 2px solid #3b2810;
  border-right: 2px solid #3b2810;
  box-shadow: 0 0 30px rgba(0,0,0,.44);
  overflow-x: hidden;
}

header {
  background: linear-gradient(180deg, var(--ks-dark), var(--ks-dark-2)) !important;
  border-bottom: 2px solid var(--ks-gold) !important;
}

.logo,
.player-name {
  color: #fff2c8 !important;
  text-shadow: 0 1px 2px #000;
}

.main-nav {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.nav-tab {
  color: #f1d8a4 !important;
  white-space: nowrap;
}

.nav-tab:hover,
.nav-tab.active {
  background: linear-gradient(180deg, #f7e3b8, #c99a4d) !important;
  color: #241407 !important;
}

.quick-menu {
  background: linear-gradient(180deg, #2e2517, #141006) !important;
  border-bottom: 2px solid #9d7b3f !important;
}

.quick-menu button:hover {
  background: rgba(255, 232, 180, .12) !important;
}

/* Genel bakis/koy adi ve kaynaklar ayni satir: float ile yer kaplar, uste binmez. */
.village-nav-bar {
  float: left;
  width: 47%;
  height: 34px !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 10px !important;
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(180deg, #fff2d2, #ecd09b) !important;
  border-bottom: 1px solid var(--ks-line) !important;
  color: #7b2b06 !important;
}

.resource-bar {
  float: right;
  width: 60%;
  height: 34px !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 0 9px 0 0 !important;
  margin: 0 !important;
  background: linear-gradient(180deg, #fff2d2, #ecd09b) !important;
  border-bottom: 1px solid var(--ks-line) !important;
  box-shadow: none !important;
  overflow: visible;
}

.resource-bar .res-item {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.resource-bar .res-item > div {
  display: inline-flex !important;
  align-items: center !important;
}

.resource-bar .res-label,
.resource-bar .res-rate {
  display: none !important;
}

.resource-bar .res-icon {
  font-size: .95rem !important;
  line-height: 1 !important;
}

.resource-bar .res-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.resource-bar .res-value {
  display: inline !important;
  color: #2a1608 !important;
  font-size: .78rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

.emanet-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 28px;
  height: 26px;
  padding: 0;
  margin-left: 8px;
  margin-right: 4px;
  flex-shrink: 0;
  align-self: center;
  border: 1px solid #b7893b;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff6db, #d7ad61);
  color: #5b2408;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  position: relative;
}
.emanet-open-btn:hover {
  background: linear-gradient(180deg, #fffbe8, #e5bf75);
  border-color: #7b3a0b;
}
.emanet-plus {
  position: absolute;
  right: 1px;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #17620f;
  color: #fff8d8;
  font-size: 8px;
  line-height: 9px;
  border: 1px solid #fff2c8;
}

.emanet-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 12px 24px;
}
.emanet-modal {
  width: min(560px, 96vw);
  background: #f3dfb2;
  border: 2px solid #7a3a18;
  box-shadow: 0 10px 35px rgba(0,0,0,.45);
  color: #241407;
  resize: both;
  overflow: auto;
}
.emanet-modal-head {
  height: 30px;
  padding: 0 10px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, #342311, #1b1007);
  color: #e9d49b;
  border-bottom: 1px solid #7a3a18;
}
.emanet-modal-head button {
  background: transparent;
  border: 0;
  color: #fff3cf;
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
}
.emanet-modal-body {
  padding: 22px 18px;
}
.emanet-modal-body h2 {
  margin: 0 0 14px;
  font-size: 1.25rem;
}
.emanet-modal-body p {
  margin: 0 0 16px;
}
.emanet-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #b99558;
  background: #f8eac5;
  font-size: .9rem;
}
.emanet-table th {
  text-align: left;
  padding: 5px;
  background: #efd8a3;
  border-bottom: 1px solid #b99558;
}
.emanet-table td {
  padding: 5px;
  border-top: 1px solid #d0b377;
}
.emanet-table td:first-child {
  width: 38%;
  border-right: 1px solid #d0b377;
}
.emanet-table tfoot td {
  color: #7a2d04;
  font-weight: 700;
  background: #efd8a3;
}
.emanet-select {
  width: 92px;
  height: 24px;
  margin-right: 5px;
  border: 1px solid #9d7b42;
  background: #fffaf0;
}
.emanet-action {
  color: #7a2d04;
  font-weight: 700;
  margin-right: 8px;
}
.emanet-row-transfer {
  float: right;
  min-width: 78px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid #2b1306;
  border-radius: 3px;
  background: linear-gradient(180deg, #7b3515, #3a1608);
  color: #fff2c8;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.emanet-row-transfer:hover {
  background: linear-gradient(180deg, #9a431b, #4a1c0b);
}
.emanet-full {
  color: #5f4b2b;
  font-weight: 700;
}
.emanet-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
}
.emanet-close {
  border: 1px solid #9b6a2c;
  background: linear-gradient(180deg, #fff0c6, #e0b56d);
  color: #7a2d04;
  font-weight: 800;
  padding: 5px 10px;
  cursor: pointer;
}

.tab-content {
  clear: both;
}

.tab-content:not(#tab-premium) {
  min-height: calc(100vh - 186px);
  background: linear-gradient(180deg, var(--ks-paper-light), var(--ks-paper)) !important;
}

#tab-premium {
  background: #080604 !important;
}

@media (max-width: 760px) {
  :root {
    --ks-shell-width: 100vw;
  }

  #game-screen {
    width: 100vw;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  .village-nav-bar,
  .resource-bar {
    float: none;
    width: 100%;
  }

  .village-nav-bar {
    overflow-x: auto;
  }

  .resource-bar {
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow-x: auto;
  }
}

/* ── Ayarlar butonu + Header elmas bakiye ── */
.btn-settings {
  background: #2a2010;
  border: 1px solid #6a5232;
  color: #e8d48b;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all .2s;
}
.btn-settings:hover {
  background: #3a2c1a;
  border-color: #c9a84c;
  box-shadow: 0 0 8px rgba(201,168,76,.3);
}
.hdr-elmas {
  display: inline-block;
  background: linear-gradient(135deg, #1a3a8f, #4488ee);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 3px;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(68,136,238,.4);
}

/* ── İnci (klanın para birimi) — beyaz inci görsel öğesi ── */
.pearl-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #e8e4dc 45%, #c9c3b6 75%, #a8a092);
  border: 1px solid #8a8378;
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.15), inset 2px 2px 3px rgba(255,255,255,0.6);
  flex: none;
}
.pearl-icon.sm { width: 14px; height: 14px; }

/* ── Envanter sandık ikonu (resource-bar) ── */
.inv-chest-btn {
  position: relative;
  background: transparent;
  border: none;
  width: 34px;
  height: 34px;
  margin-left: 4px;
  margin-right: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}
.inv-chest-btn:hover {
  transform: scale(1.12);
}
.inv-chest-icon { font-size: 1.4rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.inv-chest-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(135deg, #d81b4a, #f04068);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff4d7;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ══════════ ENVANTER ══════════ */
.inv-wrap { padding: 4px; }
.inv-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.inv-title { font-size: 1.1rem; color: #c9a84c; font-weight: 700; }
.inv-total { font-size: 0.8rem; color: #9a8b72; }
.inv-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.inv-filter {
  padding: 6px 14px; font-size: 0.78rem; font-weight: 600;
  background: rgba(255,255,255,.04); border: 1px solid #4a3a22;
  color: #9a8b72; border-radius: 6px; cursor: pointer; transition: all .2s;
}
.inv-filter:hover { color: #e8d48b; border-color: #6a5232; }
.inv-filter.active { background: rgba(201,168,76,.15); border-color: #c9a84c; color: #e8d48b; }
.inv-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.inv-slot {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.inv-slot-empty {
  background: rgba(255,255,255,.02);
  border: 1px dashed #4a3a22;
}
.inv-slot-filled {
  background: linear-gradient(160deg, #4a3722, #3a2c1a);
  border: 1px solid #6a5232;
  cursor: pointer;
  transition: all .2s;
  padding: 6px;
}
.inv-slot-filled:hover {
  border-color: #c9a84c;
  box-shadow: 0 0 12px rgba(201,168,76,.4);
  transform: translateY(-2px);
}
.inv-slot-icon { font-size: 1.8rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.inv-slot-qty {
  position: absolute; bottom: 4px; right: 5px;
  background: linear-gradient(135deg, #1a3a8f, #4488ee);
  color: #fff; font-size: 0.65rem; font-weight: 700;
  min-width: 16px; padding: 1px 4px; border-radius: 8px;
  text-align: center; border: 1px solid #fff4d7;
}
.inv-slot-label {
  font-size: 0.55rem; color: #c9b894; text-align: center;
  margin-top: 3px; line-height: 1.1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.inv-empty-msg { text-align: center; color: #9a8b72; font-size: 0.82rem; padding: 24px 0; }

@media (max-width: 700px) {
  .inv-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Envanter sekmesi boşluk fix (premium gibi) */
#tab-inventory { padding: 0 !important; margin: 0 !important; background: #3a2c1a !important; }
#tab-inventory.tab-content { min-height: auto !important; }
#tab-inventory .game-content { padding: 16px !important; }

/* Quick-menu bina görselleri */
.quick-menu .qm-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.6rem;
}
.quick-menu .qm-img img {
  height: 1.6rem;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

/* ── Gelen saldırı/destek göstergeleri (resource-bar) ── */
.incoming-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  margin: 0 2px;
  transition: transform .2s;
}
.incoming-indicator:hover { transform: scale(1.1); }
.incoming-indicator img {
  height: 30px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
#incoming-attack img { animation: attackPulse 1.2s ease-in-out infinite; }
@keyframes attackPulse {
  0%,100% { filter: drop-shadow(0 0 2px rgba(200,50,40,.4)); }
  50% { filter: drop-shadow(0 0 8px rgba(200,50,40,.9)); }
}
.incoming-count {
  font-size: 0.95rem;
  font-weight: bold;
  color: #c83228;
}
.incoming-count.support { color: #3c6ebe; }

/* ── Sancak Divanı: Tüm Köylerden Altın Topla ── */
.divan-gold-collect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, #4a3722, #3a2c1a);
  border: 1px solid #8b6914;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.divan-gold-collect-head { display: flex; align-items: center; gap: 12px; }
.divan-gold-icon {
  font-size: 2rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.divan-gold-collect-head b { color: #f0d890; font-size: 0.95rem; display: block; }
.divan-gold-collect-head small { color: #b89860; font-size: 0.72rem; }
.divan-gold-btn {
  background: linear-gradient(135deg, #c9a84c, #e8c860) !important;
  color: #3a2410 !important;
  font-weight: bold;
  white-space: nowrap;
}
.divan-gold-btn:hover {
  background: linear-gradient(135deg, #e8c860, #f5d878) !important;
  box-shadow: 0 0 12px rgba(232,200,96,.5);
}

/* Yardım sekmesi boşluk fix */
#tab-help { padding: 0 !important; margin: 0 !important; }
#tab-help.tab-content { min-height: auto !important; }

/* ── Sancak Divanı: Sancak Beyi görsel kartı ── */
.divan-bey-showcase {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #4a3722, #2e2114);
  border: 1px solid #8b6914;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.divan-bey-img {
  width: 80px;
  height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
  flex-shrink: 0;
}
.divan-bey-info b { color: #f0d890; font-size: 1.05rem; display: block; margin-bottom: 4px; }
.divan-bey-info small { color: #c0a878; font-size: 0.8rem; line-height: 1.4; }

/* Asker ikon görselleri (img) biraz daha büyük */
.troop-img { height: 1.6em; width: auto; vertical-align: middle; object-fit: contain; }
.building-troop-icon .troop-img,
.t-icon .troop-img { height: 2.2em; }


/* ============================= */
/* GPT FIX: görsel kırpma ve kutu taşma düzeltmeleri */
/* ============================= */
.divan-bey-showcase { overflow: hidden !important; }
.divan-bey-img {
  width: 90px !important;
  height: 130px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
}
.building-entry-icon img[src*="technology"],
.construction-icon img[src*="technology"],
.hs-building-img[src*="technology"],
img[src*="images/buildings/technology.png"] {
  background: transparent !important;
  object-fit: contain !important;
}
.troop-img[src*="ram.png"],
.troop-img[src*="catapult.png"] {
  max-width: 100% !important;
  max-height: 2.2em !important;
  object-fit: contain !important;
  object-position: center center !important;
}
.building-troop-icon .troop-img[src*="ram.png"],
.building-troop-icon .troop-img[src*="catapult.png"],
.t-icon .troop-img[src*="ram.png"],
.t-icon .troop-img[src*="catapult.png"] {
  height: 2.0em !important;
  width: auto !important;
}

/* resource-bar içinde banka + emanet + saldırı/destek butonları sığsın */
.resource-bar .inv-chest-btn,
.resource-bar .emanet-open-btn,
.resource-bar .incoming-indicator {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}
.resource-bar .inv-chest-btn { width: 30px !important; height: 30px !important; margin: 0 2px !important; }
.resource-bar .inv-chest-icon { font-size: 1.3rem !important; }

/* Premium cooldown canlı sayaç */
.pm-cd-active {
  color: #ff8866 !important;
  font-weight: 700;
  animation: cdPulse 2s ease-in-out infinite;
}
@keyframes cdPulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.6; }
}


/* ── Rasathane ekranı ───────────────────────────────────────── */
.rasathane-game-content { max-width: 1120px; }
.rasathane-shell {
  border: 1px solid #9d7133;
  background: linear-gradient(180deg, #f9ebc9, #efd7a5);
  box-shadow: inset 0 0 20px rgba(128,73,15,.12), 0 10px 28px rgba(0,0,0,.25);
  color: #261406;
}
.rasathane-hero {
  display: grid;
  grid-template-columns: 130px 1fr 230px;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid #b99456;
  background: linear-gradient(90deg, rgba(255,255,255,.28), transparent), repeating-linear-gradient(45deg, rgba(126,82,22,.06) 0 8px, transparent 8px 16px);
  align-items: center;
}
.rasathane-tower-card {
  height: 116px;
  border: 1px solid #ad8246;
  background: radial-gradient(circle at 50% 20%, #f7e2a9, transparent 38%), linear-gradient(180deg, #d7b879, #a47336);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 12px rgba(0,0,0,.2);
}
.rasathane-tower { width: 72px; height: 88px; position: relative; }
.rasathane-tower::before {
  content: ""; position: absolute; left: 22px; bottom: 0; width: 28px; height: 66px;
  background: linear-gradient(90deg, #92704d, #d0b18a 48%, #765638); border: 2px solid #4f321e; border-bottom: 0;
}
.rasathane-tower::after {
  content: ""; position: absolute; left: 10px; top: 2px; border-left: 26px solid transparent; border-right: 26px solid transparent; border-bottom: 34px solid #7b1f10; filter: drop-shadow(0 2px 0 #3b1508);
}
.rasathane-tower span {
  position: absolute; left: 29px; top: 40px; width: 14px; height: 14px; border-radius: 50%; background: #58a8d9; border: 2px solid #2b1609; z-index: 2;
}
.rasathane-copy h1 { margin: 0 0 8px; font-size: 28px; color: #2a1608; font-family: Georgia, serif; }
.rasathane-copy p { margin: 0; line-height: 1.45; font-size: 14px; }
.rasathane-world-note { margin-top: 10px; color: #7d2c07; font-weight: 700; font-size: 13px; }
.rasathane-summary { border: 1px solid #b38a4b; background: rgba(255,255,255,.32); padding: 10px; font-size: 13px; line-height: 1.65; }
.rasathane-summary b { color: #7b2f0a; }
.rasathane-tabs { display: flex; background: linear-gradient(180deg, #33200f, #1b1007); border-bottom: 2px solid #9c6b2c; padding-left: 10px; }
.ras-tab { border: 0; border-left: 1px solid rgba(255,255,255,.08); border-right: 1px solid rgba(0,0,0,.45); background: transparent; color: #dcc28a; padding: 13px 24px; font-weight: 800; cursor: pointer; min-width: 150px; }
.ras-tab.active { background: linear-gradient(180deg, #f4e1b0, #d5aa61); color: #5b2107; text-shadow: 0 1px rgba(255,255,255,.55); }
.ras-panel { display: none; padding: 16px; }
.ras-panel.active { display: block; }
.ras-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #c39b5d; background: linear-gradient(180deg, #fff3d1, #e6c587); color: #2c1607; }
.ras-panel-title h2 { margin: 0; font-size: 19px; font-family: Georgia, serif; }
.ras-panel-title span { font-size: 12px; color: #7a4a18; font-weight: 700; }
.ras-research-list { border: 1px solid #b68c4c; background: #f8e9c4; }
.ras-research-row { display: grid; grid-template-columns: 58px 1.6fr 1.4fr 108px 108px 118px; min-height: 86px; align-items: center; border-bottom: 1px solid #cdb178; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.05)); }
.ras-research-row > div { padding: 10px 12px; }
.ras-icon { font-size: 28px; text-align: center; }
.ras-name b { display: block; color: #7b2b06; font-size: 15px; margin-bottom: 4px; }
.ras-name small { color: #5c4930; line-height: 1.35; }
.ras-progress-wrap { display: grid; gap: 7px; }
.ras-progress-label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; color: #4b2a11; }
.ras-progress { height: 15px; border: 1px solid #7b4a17; background: #f7ddb0; box-shadow: inset 0 1px 4px rgba(0,0,0,.18); }
.ras-bar { height: 100%; background: linear-gradient(90deg, #c0661b, #f0a63d); border-right: 1px solid #71370d; }
.ras-panel.military .ras-bar { background: linear-gradient(90deg, #8d1f13, #dd6b36); }
.ras-panel.economy .ras-bar { background: linear-gradient(90deg, #2a6f23, #7cbf43); }
.ras-panel.building .ras-bar { background: linear-gradient(90deg, #235c89, #64add8); }
.ras-metric { font-size: 12px; color: #573615; }
.ras-metric b { display: block; margin-top: 3px; color: #2a1608; font-size: 14px; }
.ras-ruby-cost b { color: #9a1a0d; }
.ras-research-btn { border: 1px solid #2d1306; background: linear-gradient(180deg, #803815, #371307); color: #ffeec3; font-weight: 800; padding: 9px 10px; border-radius: 4px; cursor: pointer; width: 96px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.ras-research-btn.locked { background: linear-gradient(180deg, #9f8b68, #6d5d43); color: #eadab7; cursor: default; }
.ras-detail-toggle { text-align: center; padding: 4px 0 6px; background: linear-gradient(180deg, #f9ebc9, #efd7a5); border-bottom: 1px solid #cdb178; }
.ras-detail-check { width: 30px; height: 24px; border: 0; background: transparent; color: #1488df; font-size: 26px; line-height: 1; font-weight: 900; cursor: pointer; text-shadow: 0 1px 0 #fff, 0 2px 4px rgba(0,0,0,.16); transform: rotate(-8deg); }
.ras-detail-check:hover { color: #006fc8; transform: rotate(-8deg) scale(1.12); }
.ras-detail { display: none; padding: 10px 14px 14px; background: #fff0c9; border-bottom: 1px solid #b68c4c; }
.ras-detail.open { display: block; }
.ras-detail-table { width: 100%; border-collapse: collapse; background: #f8e7bd; border: 1px solid #b68c4c; font-size: 12px; }
.ras-detail-table th { text-align: left; padding: 7px 8px; background: linear-gradient(180deg, #e9c98b, #d8af64); color: #331807; border: 1px solid #b68c4c; }
.ras-detail-table td { padding: 6px 8px; border: 1px solid #d0b377; color: #2c1607; white-space: nowrap; }
.ras-detail-table tbody tr:nth-child(even) { background: rgba(255,255,255,.22); }
.ras-bonus-cell { color: #8b1f10 !important; font-weight: 800; }
.ras-detail-note { margin: 0 0 8px; color: #6b3c12; font-size: 12px; font-weight: 700; }
.ras-footnote { margin-top: 12px; padding: 10px 12px; border: 1px dashed #a77d3c; color: #5a3715; background: rgba(255,255,255,.24); font-size: 13px; }
@media (max-width: 900px) {
  .rasathane-hero { grid-template-columns: 90px 1fr; }
  .rasathane-summary { grid-column: 1 / -1; }
  .rasathane-tabs { overflow-x: auto; }
  .ras-tab { min-width: 132px; padding-inline: 14px; }
  .ras-research-row { grid-template-columns: 48px 1fr 1fr; }
  .ras-name { grid-column: span 2; }
  .ras-research-row > div { padding: 8px; }
  .ras-research-btn { width: 100%; }
}

/* Rasathane araştırma kuyruğu */
.ras-loading {
  padding: 22px;
  border: 1px solid #b68c4c;
  background: #f8e9c4;
  color: #4b2a11;
  font-weight: 800;
}
.ras-loading.ras-error { color: #8b1f10; }
.ras-queue-box {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid #b99456;
  background: linear-gradient(180deg, #fff1c8, #ead09a);
  color: #331807;
}
.ras-queue-box > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.ras-queue-box b {
  font-family: Georgia, serif;
  color: #5b2107;
  font-size: 17px;
}
.ras-queue-box span {
  color: #7a4a18;
  font-weight: 800;
  font-size: 12px;
}
.ras-queue-box p {
  margin: 7px 0 0;
  color: #6b3c12;
  font-size: 13px;
}
.ras-queue-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.ras-queue-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid #b68c4c;
  background: rgba(255,255,255,.35);
}
.ras-queue-item strong {
  color: #7b2b06;
  font-size: 13px;
}
.ras-queue-item span {
  color: #8b1f10;
  font-size: 13px;
  white-space: nowrap;
}
.ras-name em {
  display: block;
  margin-top: 5px;
  color: #245d82;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.ras-detail-table tr.done td {
  background: rgba(61, 128, 40, .12);
}
.ras-detail-table tr.done td:last-child {
  color: #2d7b20;
  font-weight: 800;
}
@media (max-width: 720px) {
  .ras-queue-item { align-items: flex-start; flex-direction: column; }
}

/* Rasathane kuyruk iptal butonu */
.ras-queue-cancel {
  width: 28px;
  height: 28px;
  border: 1px solid #6b2a10;
  background: linear-gradient(180deg, #9f3218, #5b1709);
  color: #ffe9c0;
  font-weight: 900;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
}
.ras-queue-cancel:hover {
  filter: brightness(1.12);
}

/* Rasathane hızlandırma butonu */
.ras-queue-speed {
  border: 1px solid #8b5c1f;
  background: linear-gradient(180deg, #f2c45b, #b7771f);
  color: #321806;
  font-weight: 900;
  border-radius: 4px;
  cursor: pointer;
  padding: 6px 10px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.ras-queue-speed:hover {
  filter: brightness(1.08);
}

/* İnşaat kuyruğu hızlandırma butonları */
.queue-speed-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}
.queue-speed-btn {
  min-width: 34px;
  height: 28px;
  border: 1px solid #8b5c1f;
  background: linear-gradient(180deg, #f2c45b, #b7771f);
  color: #321806;
  font-weight: 900;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.queue-speed-btn:hover { filter: brightness(1.08); }
@media (max-width: 760px) {
  .queue-speed-actions { margin-left: 0; margin-top: 6px; }
}

/* İnşaat hızını dakika bakiyesi olarak göster */
.queue-speed-btn.queue-speed-wide {
  min-width: 112px;
  padding: 0 10px;
}

/* 5 dakika altı şimdi bitir */
.queue-finish-now-btn {
  min-width: 92px;
  height: 28px;
  border: 1px solid #1f5f18;
  background: linear-gradient(180deg, #68b83f, #2e7a22);
  color: #fff7d0;
  font-weight: 900;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.queue-finish-now-btn:hover { filter: brightness(1.08); }

/* Kaynak barı canlı bilgi penceresi */
.res-clickable {
  cursor: pointer;
  transition: filter .12s ease, transform .12s ease;
}
.res-clickable:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.ras-speed-status.active { color: #2d7b20; }
.ras-speed-status.passive { color: #8b1f10; }
.resource-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.resource-info-modal {
  width: min(690px, 96vw);
  background: #f3dfad;
  border: 2px solid #2d1a0b;
  box-shadow: 0 18px 42px rgba(0,0,0,.45);
  color: #251407;
}
.resource-info-head {
  background: #2b1a0c;
  color: #f8e6b5;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 900;
}
.resource-info-head button {
  border: 0;
  background: transparent;
  color: #fff3c6;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}
.resource-info-body { padding: 16px 20px 18px; }
.resource-info-body h2 {
  margin: 0 0 10px;
  font-family: Georgia, serif;
  font-size: 24px;
}
.resource-info-body p { margin: 0 0 12px; line-height: 1.35; }
.resource-info-table {
  width: 100%;
  border-collapse: collapse;
  background: #f7e8bd;
  border: 1px solid #b8914f;
  margin-bottom: 12px;
}
.resource-info-table th,
.resource-info-table td {
  border: 1px solid #c6a96d;
  padding: 7px 8px;
  text-align: left;
}
.resource-info-table th {
  background: linear-gradient(180deg, #e7c986, #d2a95b);
  color: #321807;
}
.resource-info-table td:nth-child(2),
.resource-info-table td:nth-child(3) {
  text-align: right;
  font-weight: 800;
}
.resource-info-note,
.resource-info-emanet-text {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid #c5a163;
  background: rgba(255,255,255,.35);
  font-weight: 800;
  color: #6b3a12;
}
.resource-info-emanet,
.resource-info-close {
  margin-top: 8px;
  margin-right: 8px;
  border: 1px solid #8b5c1f;
  background: linear-gradient(180deg, #f2c45b, #b7771f);
  color: #321806;
  font-weight: 900;
  padding: 7px 12px;
  cursor: pointer;
}
.resource-info-close {
  background: linear-gradient(180deg, #f7e4b5, #d8b56b);
}
.map-error-box {
  position: absolute;
  left: 16px;
  top: 16px;
  right: 16px;
  padding: 14px 16px;
  border: 1px solid #8b1f10;
  background: #f8dfb0;
  color: #7b1b0e;
  font-weight: 900;
  z-index: 20;
}

/* === Toplu rapor yönetimi === */
.reports-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 10px;padding:8px;border:1px solid #c9a968;background:#f5e5bd}
.reports-toolbar button,.reports-toolbar select,.reports-pager button{border:1px solid #8b5a1f;background:linear-gradient(#fff0c4,#d7ad61);color:#4b2208;font-weight:700;padding:5px 9px;border-radius:3px;cursor:pointer}
.reports-toolbar button.danger{background:linear-gradient(#b64034,#7e130d);color:#fff0cf}
.reports-spacer{flex:1}
.reports-pager{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:8px 0;padding:7px;border-top:1px solid #c9a968}
.report-check{width:16px;height:16px;margin-right:8px;vertical-align:middle}
.report-row{position:relative}

/* === Simülatör bonusları === */
.sim-bonus-panel{margin-top:10px;padding:10px;border:1px solid #b98d49;background:#fff1c7;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sim-bonus-panel>b{width:100%;color:#5b2b0c;font-size:15px}
.sim-bonus-panel .sim-option-row{margin:0}

/* === Harita geniş görünüm / işlem kartı === */
.ks-map-shell{grid-template-columns:1fr!important}
.ks-side,.ks-minimap-wrap{display:none!important}
.ks-map-area{min-height:650px}
.map-action-card{position:absolute;z-index:35;width:320px;background:#f6e9c4;border:1px solid #6f4317;box-shadow:0 4px 14px rgba(0,0,0,.35);font-size:13px;color:#2d1808}
.map-action-head{display:flex;align-items:center;gap:6px;background:#7d0b0b;color:#fff0c9;padding:6px 8px;font-weight:800}
.map-action-head button{margin-left:auto;border:0;background:transparent;color:#fff0c9;font-size:20px;font-weight:900;cursor:pointer}
.map-action-dot{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.4)}
.map-action-info{display:grid;grid-template-columns:1fr;gap:0;border-bottom:1px solid #c9a968}
.map-action-info div{display:grid;grid-template-columns:78px 1fr;border-bottom:1px solid #dec48b;padding:3px 7px}
.map-action-info div:last-child{border-bottom:0}
.map-action-info b{color:#5b2b0c}
.map-action-grid{display:flex;gap:5px;padding:7px;flex-wrap:wrap}
.map-action-btn{min-width:34px;height:28px;border:1px solid #9a6a2c;background:linear-gradient(#fff3cb,#d8ad62);color:#4b2108;font-weight:800;border-radius:3px;cursor:pointer}
.map-action-btn:disabled{opacity:.45;cursor:not-allowed}
.map-travel-times{margin:0 7px 7px;padding:6px;border:1px solid #d2b374;background:#fff3ce;max-height:140px;overflow:auto}
.map-travel-times div{display:flex;justify-content:space-between;border-bottom:1px solid #e5c98f;padding:3px 0}
.map-travel-times div:last-child{border-bottom:0}
.map-hover-card{position:fixed;z-index:9999;display:none;background:#f6e9c4;border:1px solid #6f4317;box-shadow:0 4px 14px rgba(0,0,0,.3);padding:7px 9px;min-width:190px;pointer-events:none;color:#2d1808;font-size:13px}
.map-hover-card .mh-title{font-weight:900;color:#7d0b0b;margin-bottom:4px}
.map-hover-card .mh-title span{color:#0060a8}

/* === Harita küçük görev penceresi === */
.map-command-overlay{position:fixed;inset:0;background:rgba(0,0,0,.22);z-index:10000;display:flex;align-items:center;justify-content:center}
.map-command-modal{width:min(620px,96vw);background:#f4e6c1;border:2px solid #4a2a0f;box-shadow:0 8px 30px rgba(0,0,0,.45);color:#2a1608}
.map-command-head{height:34px;background:#2a1708;color:#f7e9bd;display:flex;align-items:center;gap:12px;padding:0 10px;font-weight:800}
.map-command-head span{font-size:13px;color:#d8bf82}
.map-command-head button{margin-left:auto;background:transparent;border:0;color:#f7e9bd;font-size:20px;font-weight:900;cursor:pointer}
.map-command-body{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px}
.map-command-group{border:1px solid #c5a367;background:#f8edca;min-height:120px}
.map-command-group-title{background:#e0c47f;border-bottom:1px solid #c5a367;color:#4b2108;font-weight:900;padding:5px 7px}
.map-command-row{display:grid;grid-template-columns:30px 1fr 46px;align-items:center;gap:5px;padding:4px 6px;border-bottom:1px solid #ead39d}
.map-command-row input{width:100%;height:23px;border:1px solid #bd914d;background:#fff6d9;text-align:center}
.map-command-row b{font-size:12px;color:#69320c;cursor:pointer}
.map-command-empty{padding:8px;color:#7a6843}
.map-command-shortcuts{padding:0 9px 8px;color:#6a2e0b;font-weight:800;font-size:13px}
.map-command-actions{display:flex;gap:10px;padding:0 9px 10px;align-items:center}
.map-command-wave-select{border:1px solid #7c4a16;background:#fff8e6;color:#3d1a05;font-weight:700;padding:6px 8px;border-radius:3px}
.map-command-actions button{border:1px solid #7c4a16;background:linear-gradient(#fff0c2,#c68a31);font-weight:900;color:#3d1a05;padding:7px 26px;cursor:pointer}

/* ── Saldırı/Destek Onay Ekranı ── */
.cmd-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:10001;display:flex;align-items:center;justify-content:center}
.cmd-confirm-modal{width:min(440px,94vw);background:#f4e6c1;border:2px solid #4a2a0f;box-shadow:0 8px 30px rgba(0,0,0,.45);color:#2a1608}
.cmd-confirm-head{display:flex;align-items:center;justify-content:space-between;background:#3d1f0a;color:#ffe6ad;padding:10px 14px;font-size:1.05rem}
.cmd-confirm-head button{background:none;border:none;color:#ffe6ad;font-size:1.2rem;cursor:pointer;line-height:1}
.cmd-confirm-box{padding:10px 14px 4px;border-bottom:1px solid #d9bb7c}
.cmd-confirm-line{display:flex;justify-content:space-between;padding:4px 0;font-size:.92rem}
.cmd-confirm-line span{color:#6a4a1f}
.cmd-confirm-line b{color:#3d1a05}
.cmd-confirm-troops{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-bottom:1px solid #d9bb7c}
.cmd-confirm-troop{display:flex;align-items:center;gap:4px;background:#fff8e6;border:1px solid #d9bb7c;border-radius:4px;padding:3px 8px;font-weight:700;font-size:.88rem}
.cmd-confirm-row{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid #d9bb7c;font-size:.9rem}
.cmd-confirm-row select{border:1px solid #7c4a16;background:#fff8e6;color:#3d1a05;padding:4px 6px;border-radius:3px}
.cmd-confirm-actions{display:flex;gap:10px;padding:12px 14px}
.cmd-confirm-btn{flex:1;border:1px solid #7c4a16;background:linear-gradient(#fff0c2,#c68a31);font-weight:900;color:#3d1a05;padding:8px;cursor:pointer}
.cmd-confirm-back{border:1px solid #7c4a16;background:#e8d7a8;font-weight:700;color:#5a3a10;padding:8px 16px;cursor:pointer}
.map-command-actions .support{background:linear-gradient(#e9f7d0,#9cc464);color:#1f4511}
.loot-assistant-card{padding:12px}
.loot-assistant-placeholder{margin-top:10px;padding:10px;border:1px dashed #b98d49;background:#fff1c7}
@media (max-width:760px){.map-command-body{grid-template-columns:repeat(2,1fr)}.map-action-card{width:290px}.ks-map-area{min-height:560px}}

/* === Harita düzeltme: daha kompakt yazılar ve ayrık simülatör bonusları === */
.sim-bonus-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.sim-bonus-side{border:1px solid #c29a58;background:#fff5d8;padding:8px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.sim-bonus-side>b{width:100%;font-size:14px;color:#5b2b0c}
.map-action-card{font-size:12px!important;width:285px!important}
.map-action-head{padding:5px 7px!important;font-size:12px!important}
.map-action-info div{grid-template-columns:66px 1fr!important;padding:2px 6px!important}
.map-action-grid{gap:4px!important;padding:6px!important}
.map-action-btn{min-width:31px!important;height:25px!important;font-size:12px!important;padding:0 5px!important}
.map-travel-times{font-size:12px!important;max-height:120px!important}
.map-hover-card{font-size:12px!important;min-width:170px!important;padding:6px 8px!important}
.map-command-modal{width:min(560px,96vw)!important}
.map-command-head{height:31px!important;font-size:13px!important}
.map-command-body{gap:5px!important;padding:7px!important}
.map-command-group-title{font-size:12px!important;padding:4px 6px!important}
.map-command-row{grid-template-columns:26px 1fr 40px!important;padding:3px 5px!important;font-size:12px!important}
.map-command-row input{height:21px!important}
.map-command-shortcuts{font-size:12px!important;padding:0 8px 7px!important}
@media (max-width:760px){.sim-bonus-split{grid-template-columns:1fr}.map-action-card{width:270px!important}}

/* === Başlangıç bölgesi / pusula === */
.world-region-box{max-width:760px;margin:0 auto;padding:18px;border:1px solid #9b6b2c;background:rgba(255,239,196,.9);box-shadow:0 3px 12px rgba(0,0,0,.25)}
.world-region-box h3{margin:0 0 8px;color:#4b2108;font-family:Georgia,serif}
.world-compass{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.world-compass button{border:1px solid #58300e;background:linear-gradient(#fff0c4,#bd7b2b);color:#3b1906;font-weight:900;font-size:17px;padding:16px;cursor:pointer;border-radius:4px}
.world-compass .random{grid-column:1/-1;background:linear-gradient(#e6f4d2,#7ca949)}

/* === Harita koyu zemin / uzak zoom temiz işaret === */
.world-map-surface,#world-map{background:#314f22!important}
.map-tile .tile-grass{background:linear-gradient(135deg,#365d25,#2e4f20)!important}
.map-tile .tile-grass.g1{background:linear-gradient(135deg,#3a6428,#315421)!important}
.map-tile .tile-grass.g2{background:linear-gradient(135deg,#2f5322,#29481d)!important}
.map-tile .tile-grass.g3{background:linear-gradient(135deg,#416b2d,#335622)!important}
.map-tile .tile-forest::before,.map-tile .tile-forest::after{background:rgba(19,62,18,.82)!important;box-shadow:10px 5px 0 rgba(13,49,14,.76),-8px 8px 0 rgba(22,76,20,.7)!important}
.map-village-marker{transform:translate(-50%,-50%)!important}
.map-village-marker.current{transform:translate(-50%,-50%) scale(1.04)!important}
.map-village-marker.far{border-radius:1px!important;border:1px solid rgba(30,20,8,.75)!important;box-shadow:0 0 0 1px rgba(255,255,255,.07)!important;padding:0!important}
.map-village-marker.far .map-village-dot{display:none!important}
.map-village-marker.far.current{background:#fff!important}
.map-village-marker.far.own{background:#fff200!important}
.map-village-marker.far.barbar{background:#aaa293!important}
.map-village-marker.far.other{background:#a60000!important}
.map-village-marker.far.enemy{background:#f22222!important}
.map-village-marker.far.ally{background:#20a3d6!important}
.map-village-marker.far.tribe{background:#1538ff!important}
.map-village-marker.far.pact{background:#8b008b!important}
.map-village-marker.far::before,.map-village-marker.far::after{display:none!important}

/* === Simülatör 3 bölümlü düzen === */
.sim-bonus-3col{grid-template-columns:1fr 1fr 1fr!important}
.sim-siege-side{align-content:flex-start}
@media (max-width:980px){.sim-bonus-3col{grid-template-columns:1fr!important}}

/* === HB1/HB2 şablon atama === */
.hb-slot-badge{display:inline-block;background:#7a130b;color:#fff4c9;border-radius:10px;padding:2px 7px;font-weight:900;margin-right:3px;font-size:12px}

/* === Harita zemin/grid/tooltip düzeltme === */
.map-tile{border-color:transparent!important;box-shadow:none!important}
.map-coordinate-layer .map-coord-x,.map-coordinate-layer .map-coord-y{background:rgba(39,31,11,.72)!important;color:#efd37a!important;border-color:rgba(255,255,255,.12)!important}
.map-tile .tile-forest::before,.map-tile .tile-forest::after{filter:brightness(.72) saturate(1.35)!important}
.map-tile .tile-forest{opacity:.95!important}
.world-map-surface::after{opacity:.12!important}
.map-action-info b,.map-hover-card b{white-space:nowrap}
.map-coord-search{position:absolute;right:58px;top:84px;z-index:80;width:220px;background:#f4e6c1;border:2px solid #3b220d;box-shadow:0 6px 18px rgba(0,0,0,.38);color:#2a1608}
.map-coord-search-head{height:30px;background:#2a1708;color:#f7e9bd;display:flex;align-items:center;padding:0 8px;font-weight:900}
.map-coord-search-head button{margin-left:auto;background:transparent;border:0;color:#f7e9bd;font-size:18px;font-weight:900;cursor:pointer}
.map-coord-search-body{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:9px}
.map-coord-search-body label{font-weight:800;color:#5b2b0c}
.map-coord-search-body input{width:100%;height:26px;border:1px solid #b88742;background:#fff7dd;text-align:center}
.map-coord-search-body button{grid-column:1/-1;border:1px solid #7c4a16;background:linear-gradient(#fff0c2,#c68a31);font-weight:900;color:#3d1a05;padding:6px;cursor:pointer}

/* === Harita düz zemin / gecikmeli tooltip paketi === */
.world-map-surface,#world-map{background:#355923!important}
.map-tile,.map-tile.grass,.map-tile.forest,.map-tile.water{background:#355923!important;border:0!important;outline:0!important;box-shadow:none!important}
.map-tile .tile-grass,.map-tile .tile-grass.g1,.map-tile .tile-grass.g2,.map-tile .tile-grass.g3,.map-tile .tile-forest,.map-tile .tile-water{background:#355923!important;border:0!important;box-shadow:none!important}
.map-tile .tile-grass::before,.map-tile .tile-water,.map-tile .tile-water::after{display:none!important}
.map-tile .tile-forest::before,.map-tile .tile-forest::after{background:rgba(8,48,10,.9)!important;filter:brightness(.55) saturate(1.6)!important;box-shadow:10px 5px 0 rgba(6,36,8,.9),-8px 8px 0 rgba(10,55,11,.82)!important}
.map-coordinate-layer{background:transparent!important}
.map-coord-search-body input{color:#000!important;-webkit-text-fill-color:#000!important;font-weight:800!important;background:#fff7dd!important}
.map-coord-search-body input::placeholder{color:#777!important}
.ks-map-tools button{font-size:13px;min-width:36px}
.ks-map-tools button[title*="HB"]{font-size:12px;font-weight:900;color:#f5df9e;background:#3a2611;border-color:#a67932}

/* === Son harita düzeltmesi: ağaç çizgisi, köy zemine oturma, puana göre görsel === */
.map-tile,.map-tile *{border:0!important;outline:0!important;box-shadow:none!important}
.map-tile .tile-forest{background:transparent!important}
.map-tile .tile-forest::before,.map-tile .tile-forest::after{border:0!important;outline:0!important;box-shadow:8px 5px 0 rgba(5,31,7,.88),-7px 7px 0 rgba(8,45,9,.82)!important;filter:brightness(.48) saturate(1.8)!important}
.map-village-marker{transform:translate(-50%,-50%)!important}
.map-village-marker.current{transform:translate(-50%,-50%) scale(1.03)!important}
.map-village-marker::before{display:none!important}
.map-village-marker::after{bottom:-1px!important;width:28px!important;height:8px!important;background:radial-gradient(ellipse,rgba(0,0,0,.16),rgba(0,0,0,0) 70%)!important;border:0!important;box-shadow:none!important}
.map-village-marker.selected::after{display:block!important;bottom:-5px!important;width:44px!important;height:26px!important;border:2px solid rgba(240,220,145,.94)!important;background:transparent!important;box-shadow:0 0 8px rgba(255,229,137,.65)!important}
.map-village-icon{inset:auto!important;left:50%!important;bottom:-3px!important;width:130%!important;height:auto!important;max-height:135%!important;transform:translateX(-50%)!important;object-fit:contain!important;filter:drop-shadow(0 2px 1px rgba(0,0,0,.22))!important}
.map-village-marker.tier2 .map-village-icon{width:142%!important;bottom:-4px!important}
.map-village-marker.tier3 .map-village-icon{width:148%!important;bottom:-5px!important}
.map-village-marker.tier4 .map-village-icon{width:154%!important;bottom:-6px!important}
.map-village-marker.barbar .map-village-icon{filter:grayscale(.72) saturate(.55) brightness(.82) drop-shadow(0 2px 1px rgba(0,0,0,.2))!important}
.map-village-marker.other .map-village-icon,.map-village-marker.enemy .map-village-icon{filter:saturate(.92) brightness(.96) drop-shadow(0 2px 1px rgba(0,0,0,.22))!important}

/* === Son paket: köy görsel dengeleme, kapatma, scroll ve lejant === */
.map-village-marker{width:30px!important;height:24px!important}
.map-village-marker.tier2{width:29px!important;height:23px!important}
.map-village-marker.tier3{width:31px!important;height:25px!important}
.map-village-marker.tier4{width:34px!important;height:27px!important}
.map-village-marker.tier2 .map-village-icon{width:108%!important;bottom:-2px!important;filter:sepia(.28) saturate(1.15) brightness(.78) contrast(1.08) drop-shadow(0 1px 1px rgba(0,0,0,.16))!important}
.map-village-marker.tier3 .map-village-icon{width:114%!important;bottom:-2px!important;filter:sepia(.32) saturate(1.18) brightness(.76) contrast(1.1) drop-shadow(0 1px 1px rgba(0,0,0,.16))!important}
.map-village-marker.tier4 .map-village-icon{width:120%!important;bottom:-2px!important;filter:sepia(.36) saturate(1.22) brightness(.74) contrast(1.12) drop-shadow(0 1px 1px rgba(0,0,0,.16))!important}
.map-village-marker.tier1 .map-village-icon{filter:sepia(.18) saturate(1.05) brightness(.92) drop-shadow(0 1px 1px rgba(0,0,0,.16))!important}
.map-village-marker.barbar .map-village-icon{filter:grayscale(.68) sepia(.15) saturate(.75) brightness(.72) contrast(1.12) drop-shadow(0 1px 1px rgba(0,0,0,.14))!important}
.map-village-marker::after{height:5px!important;width:18px!important;opacity:.45!important}
.map-village-marker.selected::after{width:38px!important;height:22px!important;opacity:1!important}
.map-tile,.map-tile *{border:0!important;outline:0!important;box-shadow:none!important;background-color:#355923!important}
.map-tile .tile-forest{background:transparent!important}
.map-tile .tile-forest::before,.map-tile .tile-forest::after{border:0!important;outline:0!important;filter:brightness(.42) saturate(1.9)!important;box-shadow:7px 4px 0 rgba(4,28,6,.9),-6px 6px 0 rgba(6,42,8,.85)!important;background:rgba(5,38,7,.92)!important}
.map-coord-search-body input{color:#000!important;-webkit-text-fill-color:#000!important;font-weight:900!important}
#tab-map{overflow:hidden!important}
#tab-map .ks-map-shell{overflow:hidden!important;max-height:calc(100vh - 128px)!important;display:flex!important;flex-direction:column!important}
#tab-map .ks-map-area{height:calc(100vh - 198px)!important;min-height:430px!important;overflow:hidden!important;flex:1 1 auto!important}
.ks-legend-outside{position:static!important;margin:4px 10px 0!important;border:1px solid #b9934d!important;background:#ead79f!important;box-shadow:none!important;flex:0 0 auto!important}
.ks-map-area .ks-legend{display:none!important}

/* === Köy görseli son dengeleme: daha küçük ve zemine yakın === */
.map-village-marker{width:23px!important;height:18px!important;transform:translate(-50%,-43%)!important}
.map-village-marker.current{transform:translate(-50%,-43%) scale(1.02)!important}
.map-village-marker.tier2{width:23px!important;height:18px!important}
.map-village-marker.tier3{width:24px!important;height:19px!important}
.map-village-marker.tier4{width:26px!important;height:20px!important}
.map-village-icon{width:92%!important;max-height:112%!important;bottom:-8px!important;filter:sepia(.22) saturate(1.08) brightness(.82) contrast(1.08)!important;filter:sepia(.22) saturate(1.08) brightness(.82) contrast(1.08)!important;}
.map-village-marker.tier2 .map-village-icon{width:88%!important;bottom:-8px!important;filter:sepia(.34) saturate(1.15) brightness(.68) contrast(1.12)!important}
.map-village-marker.tier3 .map-village-icon{width:92%!important;bottom:-8px!important;filter:sepia(.38) saturate(1.17) brightness(.66) contrast(1.14)!important}
.map-village-marker.tier4 .map-village-icon{width:96%!important;bottom:-8px!important;filter:sepia(.42) saturate(1.2) brightness(.64) contrast(1.16)!important}
.map-village-marker.barbar .map-village-icon{filter:grayscale(.72) sepia(.2) saturate(.7) brightness(.64) contrast(1.14)!important}
.map-village-marker::after{display:none!important}
.map-village-marker.selected::after{display:block!important;bottom:-7px!important;width:32px!important;height:19px!important;border:2px solid rgba(240,220,145,.94)!important;background:transparent!important;box-shadow:0 0 8px rgba(255,229,137,.65)!important}

/* Rasathane görsel denemesi */
.rasathane-art-card{height:132px!important;background:radial-gradient(ellipse at center,#ead09a 0%,#c89d56 100%)!important;overflow:hidden!important}
.rasathane-hero-art{width:150px;height:112px;object-fit:contain;display:block;filter:drop-shadow(0 4px 3px rgba(0,0,0,.28))}
.rasathane-tower-card .rasathane-tower{display:none!important}

/* === Zoom dengeli köy boyutları + technology.png Rasathane === */
.map-village-marker{width:30px!important;height:24px!important;transform:translate(-50%,-45%)!important}
.map-village-marker.current{transform:translate(-50%,-45%) scale(1.02)!important}
.map-village-marker.tier1{width:29px!important;height:23px!important}
.map-village-marker.tier2{width:30px!important;height:24px!important}
.map-village-marker.tier3{width:32px!important;height:25px!important}
.map-village-marker.tier4{width:34px!important;height:27px!important}
.map-village-icon{width:112%!important;max-height:126%!important;bottom:-6px!important;filter:sepia(.22) saturate(1.08) brightness(.82) contrast(1.08)!important}
.map-village-marker.tier1 .map-village-icon{width:105%!important;bottom:-6px!important}
.map-village-marker.tier2 .map-village-icon{width:104%!important;bottom:-6px!important;filter:sepia(.34) saturate(1.16) brightness(.70) contrast(1.12)!important}
.map-village-marker.tier3 .map-village-icon{width:108%!important;bottom:-6px!important;filter:sepia(.38) saturate(1.18) brightness(.68) contrast(1.14)!important}
.map-village-marker.tier4 .map-village-icon{width:112%!important;bottom:-6px!important;filter:sepia(.42) saturate(1.2) brightness(.66) contrast(1.15)!important}
.map-village-marker.far{width:8px!important;height:8px!important;transform:translate(-50%,-50%)!important}
.map-village-marker.far .map-village-icon{display:none!important}
.rasathane-hero-art{width:118px!important;height:118px!important;object-fit:contain!important;filter:drop-shadow(0 3px 2px rgba(0,0,0,.24))!important}
.rasathane-art-card{display:grid!important;place-items:center!important;background:linear-gradient(180deg,#d7b879,#a47336)!important}

/* === Final harita ölçek eşitleme: tüm köyler aynı boyutta, sadece şekil değişir === */
.map-village-marker:not(.far),
.map-village-marker.tier1:not(.far),
.map-village-marker.tier2:not(.far),
.map-village-marker.tier3:not(.far),
.map-village-marker.tier4:not(.far){
  width:38px!important;
  height:30px!important;
  transform:translate(-50%,-45%)!important;
}
.map-village-marker.current:not(.far){
  transform:translate(-50%,-45%) scale(1.02)!important;
}
.map-village-marker:not(.far) .map-village-icon,
.map-village-marker.tier1:not(.far) .map-village-icon,
.map-village-marker.tier2:not(.far) .map-village-icon,
.map-village-marker.tier3:not(.far) .map-village-icon,
.map-village-marker.tier4:not(.far) .map-village-icon{
  left:50%!important;
  bottom:-4px!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  transform:translateX(-50%)!important;
  object-fit:contain!important;
  filter:sepia(.28) saturate(1.12) brightness(.76) contrast(1.12) drop-shadow(0 1px 1px rgba(0,0,0,.16))!important;
}
.map-village-marker.tier1:not(.far) .map-village-icon{filter:sepia(.16) saturate(1.05) brightness(.9) contrast(1.06) drop-shadow(0 1px 1px rgba(0,0,0,.16))!important;}
.map-village-marker.barbar:not(.far) .map-village-icon{filter:grayscale(.68) sepia(.16) saturate(.72) brightness(.72) contrast(1.12) drop-shadow(0 1px 1px rgba(0,0,0,.14))!important;}
.map-village-marker.far,
.map-village-marker.tier1.far,
.map-village-marker.tier2.far,
.map-village-marker.tier3.far,
.map-village-marker.tier4.far{
  width:8px!important;
  height:8px!important;
  transform:translate(-50%,-50%)!important;
}
.map-village-marker.far .map-village-icon{display:none!important;}
.map-village-marker.selected:not(.far)::after{width:40px!important;height:23px!important;bottom:-7px!important;}

/* === Harita final: zooma göre ağaç ve 5x5 koordinat çizgisi === */
.map-major-grid-layer{position:absolute;inset:0;pointer-events:none;z-index:4}
.map-major-line{position:absolute;background:rgba(22,15,6,.22)!important;display:block!important;box-shadow:none!important}
.map-major-line.x{top:0;bottom:0;width:1px}
.map-major-line.y{left:0;right:0;height:1px}
.map-village-layer{z-index:12!important}
.map-coordinate-layer{z-index:18!important}
/* uzak zoom: ağaçlar koyu küçük orman lekesi */
.world-map-surface.map-zoom-far .map-tile .tile-forest::before,
.world-map-surface.map-zoom-far .map-tile .tile-forest::after{width:5px!important;height:5px!important;border-radius:50%!important;background:rgba(4,30,6,.96)!important;box-shadow:6px 3px 0 rgba(4,30,6,.9),-4px 4px 0 rgba(5,38,7,.86),2px 7px 0 rgba(3,25,5,.78)!important;filter:none!important;opacity:.95!important}
.world-map-surface.map-zoom-far .map-tile .tile-forest::before{left:32%!important;top:34%!important}
.world-map-surface.map-zoom-far .map-tile .tile-forest::after{left:48%!important;top:48%!important}
/* orta zoom: daha doğal küçük kümeler */
.world-map-surface.map-zoom-mid .map-tile .tile-forest::before,
.world-map-surface.map-zoom-mid .map-tile .tile-forest::after{width:8px!important;height:10px!important;border-radius:45% 55% 50% 50%!important;background:rgba(8,48,10,.92)!important;box-shadow:9px 5px 0 rgba(5,35,7,.86),-7px 6px 0 rgba(9,56,11,.78),2px 11px 0 rgba(4,30,6,.72)!important;filter:brightness(.62) saturate(1.5)!important}
/* yakın zoom: okunur ağaç grupları */
.world-map-surface.map-zoom-near .map-tile .tile-forest::before,
.world-map-surface.map-zoom-near .map-tile .tile-forest::after{width:12px!important;height:16px!important;border-radius:48% 52% 55% 45%!important;background:rgba(12,62,14,.9)!important;box-shadow:12px 6px 0 rgba(7,42,9,.82),-9px 8px 0 rgba(15,82,18,.72),4px 15px 0 rgba(5,34,7,.7)!important;filter:brightness(.7) saturate(1.45)!important}

/* === Koordinat hücresi test: 1x1 beyaz çizgi + köy hücre içine oturma === */
.map-cell-grid-layer{position:absolute;inset:0;pointer-events:none;z-index:5}
.map-cell-line{position:absolute;display:block!important;background:rgba(255,255,255,.42)!important;box-shadow:none!important}
.map-cell-line.x{top:0;bottom:0;width:1px}
.map-cell-line.y{left:0;right:0;height:1px}
.map-major-grid-layer{z-index:6!important}
.map-major-line{background:rgba(255,255,255,.62)!important}
.map-village-layer{z-index:12!important}
.map-village-marker:not(.far),
.map-village-marker.tier1:not(.far),
.map-village-marker.tier2:not(.far),
.map-village-marker.tier3:not(.far),
.map-village-marker.tier4:not(.far){
  width:var(--marker-size)!important;
  height:var(--marker-height)!important;
  transform:translate(-50%,-50%)!important;
}
.map-village-marker.current:not(.far){transform:translate(-50%,-50%) scale(1.02)!important}
.map-village-marker:not(.far) .map-village-icon,
.map-village-marker.tier1:not(.far) .map-village-icon,
.map-village-marker.tier2:not(.far) .map-village-icon,
.map-village-marker.tier3:not(.far) .map-village-icon,
.map-village-marker.tier4:not(.far) .map-village-icon{
  left:50%!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  transform:translateX(-50%)!important;
  object-fit:contain!important;
}
.map-village-marker.far{width:8px!important;height:8px!important;transform:translate(-50%,-50%)!important}
.map-village-marker.selected:not(.far)::after{width:calc(var(--marker-size) + 8px)!important;height:calc(var(--marker-height) + 6px)!important;bottom:-4px!important}

/* === Harita koordinat hücresi final: Seçenek A === */
.ks-ruler-top span,
.ks-ruler-left span{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#f3c85c!important;
  text-shadow:1px 1px 1px rgba(0,0,0,.65)!important;
}
.ks-ruler-top span{
  top:0!important;
  height:100%!important;
  transform:none!important;
  border-left:1px solid rgba(255,255,255,.72)!important;
}
.ks-ruler-left span{
  left:0!important;
  width:100%!important;
  transform:none!important;
  border-top:1px solid rgba(255,255,255,.72)!important;
}
.map-cell-grid-layer{
  display:none!important;
}
.map-major-grid-layer{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:6!important;
}
.map-major-line{
  position:absolute!important;
  display:block!important;
  background:rgba(18,12,5,.34)!important;
  box-shadow:none!important;
}
.map-major-line.x{top:0!important;bottom:0!important;width:1px!important}
.map-major-line.y{left:0!important;right:0!important;height:1px!important}
.map-village-marker:not(.far),
.map-village-marker.tier1:not(.far),
.map-village-marker.tier2:not(.far),
.map-village-marker.tier3:not(.far),
.map-village-marker.tier4:not(.far){
  width:var(--marker-size)!important;
  height:var(--marker-height)!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  padding:0!important;
  overflow:visible!important;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.32))!important;
}
.map-village-marker.current:not(.far){
  transform:translate(-50%,-50%) scale(1.02)!important;
}
.map-village-marker:not(.far) .map-village-icon,
.map-village-marker.tier1:not(.far) .map-village-icon,
.map-village-marker.tier2:not(.far) .map-village-icon,
.map-village-marker.tier3:not(.far) .map-village-icon,
.map-village-marker.tier4:not(.far) .map-village-icon{
  left:50%!important;
  top:50%!important;
  bottom:auto!important;
  width:108%!important;
  height:108%!important;
  max-width:none!important;
  max-height:none!important;
  transform:translate(-50%,-50%)!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:0!important;
  clip-path:none!important;
  box-shadow:none!important;
}
.map-village-marker.selected:not(.far)::after{
  left:50%!important;
  top:50%!important;
  bottom:auto!important;
  width:calc(var(--marker-size) + 6px)!important;
  height:calc(var(--marker-height) + 6px)!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
}
.map-village-marker:not(.far) .map-village-dot{
  left:23%!important;
  top:24%!important;
  right:auto!important;
  width:9px!important;
  height:9px!important;
  transform:translate(-50%,-50%)!important;
  z-index:8!important;
}

/* Karargah artık modal değil, bina sayfası içinde açılır */
.karargah-page-inline {
  background: #f5e6bd;
  border: 1px solid #c9a06a;
  color: #2a1608;
}
.karargah-page-inline .karargah-layout {
  min-height: 560px;
}
.karargah-page-inline .karargah-content {
  min-height: 560px;
}

/* Genel bina sayfası sade başlık: geri butonu ve ikon kalabalığı yok */
.building-page-back { display: none !important; }
.building-page-header {
  min-height: 46px;
  padding-left: 18px !important;
  align-items: center !important;
}
.building-page-title {
  margin: 0 !important;
  font-size: 1.05rem !important;
}

/* Karargah sayfa içi düzen genişletme */
.karargah-page-inline .karargah-layout {
  min-height: 640px !important;
  align-items: stretch !important;
}
.karargah-page-inline .karargah-sidemenu {
  min-height: 640px !important;
}
.karargah-page-inline .karargah-content {
  min-height: 640px !important;
  width: 100% !important;
}
.kara-movement-split {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kara-movement-block {
  width: 100%;
}
.kara-emir-table {
  width: 100%;
}
.kara-emir-table th,
.kara-emir-table td {
  white-space: nowrap;
}
.kara-emir-table td:nth-child(2) {
  white-space: normal;
}

/* Genel Bakış klasik çoklu sekme görünümü */
.overview-classic {
  background: #f4e6bd;
  color: #2a1608;
  padding: 10px 12px 16px;
  border: 1px solid #c8ad75;
}
.overview-classic h2 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  color: #2a1608;
}
.overview-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid #bfa46c;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.overview-tab {
  border: 1px solid #bfa46c;
  border-bottom: 0;
  background: #f7edcf;
  color: #6a2500;
  padding: 6px 10px;
  font-weight: 800;
  cursor: pointer;
}
.overview-tab.active {
  background: #e8cf8e;
  color: #3b1600;
}
.overview-groups {
  border: 1px solid #c7ad73;
  background: #f7edcf;
  padding: 4px 8px;
  margin-bottom: 4px;
  color: #6a2500;
  font-weight: 800;
}
.overview-groups button {
  margin-left: 14px;
  border: 1px solid #b58d4e;
  background: #f4d99b;
  color: #6a2500;
  font-weight: 800;
}
.overview-classic .overview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #f5e8c5;
}
.overview-classic .overview-table th {
  background: #e9d096;
  color: #2a1608;
  border: 1px solid #c3aa73;
  padding: 5px 6px;
}
.overview-classic .overview-table td {
  border: 1px solid #cdb98b;
  padding: 6px 7px;
  color: #2a1608;
}
.overview-classic .overview-table tr:nth-child(even) td { background: #f2e3bc; }
.overview-classic .ov-name { min-width: 260px; font-weight: 800; color: #6a2500; }
.overview-classic .ov-village-link { color: #7b2400; cursor: pointer; font-weight: 900; }
.overview-classic .ov-coord { color: #351600; margin-left: 4px; }
.overview-classic .ov-rename-btn {
  border: 0;
  background: transparent;
  color: #a04a14;
  cursor: pointer;
  font-weight: 900;
  padding: 0 3px;
}
.overview-classic .ov-num { text-align: right; white-space: nowrap; }
.overview-classic .ov-muted { color: #999 !important; }
.overview-classic .ov-red { color: #d10000 !important; }
.overview-classic .ov-dot-cell { text-align: center; }
.overview-classic .ov-compact th,
.overview-classic .ov-compact td { padding: 4px 5px; }
.overview-classic .ov-total-row td { background: #e6cd8f !important; font-weight: 900; }
.overview-classic .ov-build-icon { display:inline-block; margin-right:4px; }
.overview-classic .ov-ras-icon { display:inline-block; width:24px; text-align:center; }

/* Genel Bakış > Karargah Takip alt sekmeleri */
.overview-subtabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  border: 1px solid #c7ad73;
  border-bottom: 0;
  margin: 6px 0 4px;
}
.overview-subtab {
  border: 0;
  border-right: 1px solid #c7ad73;
  border-bottom: 1px solid #c7ad73;
  background: #f6ebc9;
  color: #6a2500;
  padding: 6px 8px;
  font-weight: 900;
  cursor: pointer;
  text-align: left;
}
.overview-subtab:last-child { border-right: 0; }
.overview-subtab.active { background: #e9cf8f; color: #2a1608; }
.ov-empty-line,
.ov-perm-denied,
.ov-loot-total {
  border: 1px solid #c7ad73;
  background: #f6ebc9;
  padding: 8px 10px;
  color: #6a2500;
  font-weight: 700;
}
.ov-perm-denied { color: #8b1e13; }
.ov-loot-total { margin-bottom: 5px; }
@media (max-width: 900px) {
  .overview-subtabs { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

/* Genel Bakış satır içi köy adı düzenleme */
.ov-rename-inline {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ov-rename-inline input {
  height: 24px;
  min-width: 170px;
  border: 1px solid #3c220e;
  background: #fff8de;
  color: #2a1608;
  padding: 2px 5px;
  font-weight: 800;
}
.ov-inline-save,
.ov-inline-cancel {
  height: 24px;
  min-width: 24px;
  border: 1px solid #b58d4e;
  background: #f4d99b;
  color: #6a2500;
  font-weight: 900;
  cursor: pointer;
}
.ov-inline-cancel { background: #ecd1b0; }

/* Pazar / Kervan hareketleri */
.market-movement-title { margin-top: 14px; }
.market-movement-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  background: #f7e8c2;
  border: 1px solid #c7ad73;
}
.market-movement-table th,
.market-movement-table td {
  border: 1px solid #c7ad73;
  padding: 6px 8px;
  font-size: 13px;
}
.market-movement-table th {
  background: #e7cf91;
  color: #2b1808;
  text-align: left;
}
.trade-move-out { color: #d10000 !important; font-weight: 900; }
.trade-move-in { color: #005bd6 !important; font-weight: 900; }
.overview-classic .ov-blue { color: #005bd6 !important; font-weight: 900; }

/* Harita / köy bilgi penceresi */
.map-travel-times {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: stretch;
}
.map-travel-times .map-travel-item {
  min-width: 48px;
  text-align: center;
  border: 1px solid rgba(110,75,30,.35);
  background: rgba(255,238,190,.88);
  padding: 3px 5px;
  border-radius: 3px;
}
.map-travel-times .map-travel-item span,
.map-travel-times .map-travel-item b { display:block; }

.village-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.village-info-window {
  width: min(980px, calc(100vw - 30px));
  max-height: calc(100vh - 30px);
  overflow: auto;
  background: #f3e1b8;
  border: 2px solid #6b4b22;
  box-shadow: 0 10px 35px rgba(0,0,0,.45);
  font-family: Georgia, 'Times New Roman', serif;
  color: #2b1808;
}
.vinfo-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#2b1a0e;
  color:#f7e8c2;
  padding:10px 14px;
  font-size:20px;
  font-weight:900;
}
.vinfo-head button { background:#f0d99b; border:1px solid #9b763c; padding:2px 9px; cursor:pointer; }
.vinfo-body { display:grid; grid-template-columns: 405px 1fr; gap:10px; padding:12px; }
.vinfo-map-preview {
  height: 245px;
  border: 1px solid #9b763c;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    #5b7c32;
  background-size: 16px 16px;
  position: relative;
  margin-bottom:10px;
}
.vinfo-map-dot { position:absolute; left:14px; bottom:14px; background:#fff; color:#111; padding:2px 8px; font-weight:900; }
.vinfo-table, .vinfo-move-table { width:100%; border-collapse:collapse; margin-bottom:10px; }
.vinfo-table th, .vinfo-table td, .vinfo-move-table th, .vinfo-move-table td {
  border:1px solid #c7ad73; padding:6px 8px; background:#f7e8c2;
}
.vinfo-table th, .vinfo-move-table th { background:#e4c985; text-align:left; }
.vinfo-actions button {
  display:block; width:100%; text-align:left; border:0; border-bottom:1px solid #c7ad73;
  background:#f4e4bd; color:#6b2500; font-weight:900; padding:6px; cursor:pointer;
}
.vinfo-note { border:1px solid #c7ad73; background:#f7e8c2; margin-bottom:10px; }
.vinfo-note h4 { margin:0; background:#e4c985; padding:7px; }
.vinfo-note p { margin:8px; color:#888; }
.vinfo-note button { margin:0 8px 8px; background:#5c3617; color:#fff3d5; border:0; padding:6px 12px; border-radius:3px; }
.vinfo-times-wrap { margin-top:10px; border:1px solid #c7ad73; background:#f7e8c2; }
.vinfo-times-wrap h4 { margin:0; padding:7px; background:#e4c985; }
.vinfo-times { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:2px; padding:6px; }
.vinfo-time-item { min-width:50px; text-align:center; border-right:1px solid #c7ad73; padding:4px 6px; }
.vinfo-time-item span, .vinfo-time-item b { display:block; font-size:12px; }
@media (max-width: 800px) { .vinfo-body { grid-template-columns: 1fr; } }

/* Köy profili artık popup değil, normal sayfa görünümü */
.village-info-page-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 12px 22px;
}
.village-info-window.vinfo-page {
  width: 100%;
  max-height: none;
  overflow: visible;
  box-shadow: none;
  border: 1px solid #6b4b22;
}
.village-info-window.vinfo-page .vinfo-head button {
  min-width: 110px;
}

/* Harita küçük kartındaki varış süreleri: kesin yatay görünüm */
.map-action-card .map-travel-times {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(42px, 1fr)) !important;
  gap: 3px !important;
  max-height: 160px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.map-action-card .map-travel-times .map-travel-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  border: 1px solid #d2b374 !important;
  border-bottom: 1px solid #d2b374 !important;
  background: #fff7dc !important;
  padding: 4px 3px !important;
  min-width: 0 !important;
  text-align: center !important;
}
.map-action-card .map-travel-times .map-travel-item span,
.map-action-card .map-travel-times .map-travel-item b {
  display: block !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

/* Harita küçük köy kartı büyütme + sahibi link */
.map-action-card {
  width: 360px !important;
  max-width: 360px !important;
}
.map-action-card .map-action-info {
  grid-template-columns: 92px 1fr !important;
}
.map-action-card .map-travel-times {
  grid-template-columns: repeat(4, minmax(68px, 1fr)) !important;
  max-height: 220px !important;
  padding: 8px !important;
}
.map-action-card .map-travel-times .map-travel-item {
  min-height: 46px !important;
  font-size: 14px !important;
}
.map-action-card .map-travel-times .map-travel-item span {
  font-size: 20px !important;
}
.map-action-card .map-travel-times .map-travel-item b {
  font-size: 13px !important;
}
.map-owner-link {
  color: #6b2500 !important;
  text-decoration: underline;
  font-weight: 900;
  cursor: pointer;
}

/* Harita kartı üst bilgi hizası + daha dengeli varış kutuları */
.map-action-card { width: 330px !important; max-width: 330px !important; }
.map-action-card .map-action-info { display: grid !important; grid-template-columns: 1fr !important; }
.map-action-card .map-action-info div { grid-template-columns: 74px 1fr !important; align-items: center !important; }
.map-action-card .map-travel-times {
  grid-template-columns: repeat(4, minmax(56px, 1fr)) !important;
  max-height: 185px !important;
  padding: 6px !important;
}
.map-action-card .map-travel-times .map-travel-item {
  min-height: 38px !important;
  padding: 3px 2px !important;
  font-size: 12px !important;
}
.map-action-card .map-travel-times .map-travel-item span { font-size: 16px !important; }
.map-action-card .map-travel-times .map-travel-item b { font-size: 12px !important; }
.profile-village-link { cursor:pointer; }

/* Harita kartı süreleri: 5 ikon yan yana, daha küçük ve görünür */
.map-action-card { width: 335px !important; max-width: 335px !important; }
.map-action-card .map-travel-times {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(45px, 1fr)) !important;
  gap: 2px !important;
  max-height: 170px !important;
  padding: 5px !important;
  overflow-y: auto !important;
}
.map-action-card .map-travel-times .map-travel-item {
  min-height: 32px !important;
  padding: 2px 1px !important;
  font-size: 11px !important;
}
.map-action-card .map-travel-times .map-travel-item span { font-size: 13px !important; }
.map-action-card .map-travel-times .map-travel-item b { font-size: 11px !important; }
.map-action-card .map-action-info { grid-template-columns: 1fr !important; }
.map-action-card .map-action-info div { grid-template-columns: 70px 1fr !important; }

/* Profil / Ayarlar sayfası */
.profile-settings-page { max-width: 1000px; margin: 0 auto; }
.profile-settings-box h2 { margin: 0 0 12px; color:#2b2b2b; }
.profile-settings-layout { display:grid; grid-template-columns: 170px 1fr; gap:8px; }
.profile-settings-menu { border:1px solid #c7ad73; background:#f1d99d; align-self:start; }
.profile-settings-menu button {
  display:block; width:100%; text-align:left; border:0; border-bottom:1px solid #c7ad73;
  background:#f7e8c2; color:#6b2500; font-weight:900; padding:7px 8px; cursor:pointer;
}
.profile-settings-menu button.active { background:#e7cf91; color:#2b1808; }
.profile-settings-content { border:1px solid #c7ad73; background:#f7e8c2; min-height:360px; }
.profile-form-table { width:100%; border-collapse:collapse; }
.profile-form-table th { text-align:left; background:#e7cf91; border:1px solid #c7ad73; padding:7px; }
.profile-form-table td { border:1px solid #c7ad73; padding:6px 8px; vertical-align:top; }
.profile-form-table input[type="text"],
.profile-form-table input[type="email"],
.profile-form-table input[type="password"],
.profile-form-table select { padding:3px 5px; border:1px solid #b58d4b; background:#fff7df; }
.profile-form-table textarea { width:100%; box-sizing:border-box; border:1px solid #b58d4b; background:#fff; font-family:monospace; }
.profile-save-btn { background:#704213; color:#fff3d5; border:1px solid #3b1f08; padding:6px 14px; font-weight:900; cursor:pointer; }
.profile-danger-btn { background:#8b1111; color:#fff; border:1px solid #4a0000; padding:7px 14px; font-weight:900; cursor:pointer; }
.profile-active-text { margin-top:10px; border:1px solid #c7ad73; background:#f7e8c2; padding:8px; }
.profile-bb-help { text-align:right; font-weight:900; color:#6b2500; padding-top:4px; }
@media (max-width: 760px) { .profile-settings-layout { grid-template-columns:1fr; } }

/* Profil bilgileri okunaklı inputlar + oyun içi mesaj butonları */
.profile-form-table input.profile-clear-input,
.profile-form-table #prof-title,
.profile-form-table #prof-location,
.profile-form-table #prof-real-name {
  color: #111 !important;
  background: #fff8df !important;
  font-weight: 700;
}
.profile-msg-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 4px 0 6px;
}
.profile-msg-buttons span {
  font-weight: 900;
  color: #5b2b0c;
  margin-right: 4px;
}
.profile-msg-buttons button {
  border: 1px solid #9b763c;
  background: #ead29a;
  color: #2b1808;
  font-weight: 900;
  padding: 3px 7px;
  cursor: pointer;
}
.profile-msg-buttons input[type="color"] {
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid #9b763c;
  background: #fff;
}

/* Profil son düzenlemeler */
.profile-title-paper {
  border: 1px solid #9b763c;
  background: #f1d99d;
  color: #2b1808;
  font-weight: 900;
  padding: 4px 8px;
  cursor: pointer;
  margin-right: 6px;
}
.rename-price, .rename-item { display:inline-block; padding:3px 8px; background:#ead29a; border:1px solid #b58d4b; font-weight:900; margin:0 4px; }
.ok-text { color:#1d7c1d; }
.err-text { color:#9b1212; }
.invite-blue-title { color:#0957b8 !important; font-size:1.25rem; margin:0 0 10px; }
.invite-link-input { width: min(520px, 95%); padding:5px 8px; border:1px solid #b58d4b; background:#fff8df; color:#111; font-weight:700; }
.profile-panel h3 { color:#2b2b2b; margin:8px 0 10px; }
.profile-form-table thead th { text-align:left; background:#e7cf91; border:1px solid #c7ad73; padding:7px; }

/* Son fix: kaynak kapasitesi ve rapor renkleri */
.resource-bar .res-item.res-full .res-value { color:#d60000 !important; font-weight:900 !important; }
.rep-row { border-left-width:4px !important; }
.rep-row-win { background:#edf9df !important; border-left-color:#27a23a !important; }
.rep-row-win-loss { background:#fff4cc !important; border-left-color:#d89b00 !important; }
.rep-row-loss { background:#ffe3df !important; border-left-color:#d33 !important; }
.rep-row-loss-damage { background:#ffe9c7 !important; border-left-color:#f06b00 !important; }
.rep-row-spy { background:#e4f0ff !important; border-left-color:#3b84d8 !important; }
.rep-row-spy-loss { background:linear-gradient(90deg,#e4f0ff 0%,#e4f0ff 70%,#ffe3df 100%) !important; border-left-color:#3b84d8 !important; border-right:4px solid #d33 !important; }
.report-detail-nav { display:flex; justify-content:flex-end; gap:8px; margin:8px 0 10px; }
.report-detail-nav button { background:#f7e4b6; border:1px solid #b98b45; color:#7b2b06; padding:4px 10px; font-weight:900; cursor:pointer; }
.report-detail-nav button:disabled { opacity:.45; cursor:not-allowed; }
.kara-target-helper { margin:0 0 12px; padding:8px; border:1px solid #d6b468; background:#fff0c8; }
.kara-target-helper > button { margin:2px 6px 4px 0; border:0; background:transparent; color:#8b2d00; font-weight:900; cursor:pointer; }
.kara-target-helper-body { display:flex; flex-wrap:wrap; gap:6px; padding-top:4px; }
.kara-target-helper-body button { background:#f6d99a; border:1px solid #a6712b; padding:3px 8px; color:#4a2505; font-weight:700; cursor:pointer; }
.username-change-actions { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.profile-save-btn.disabled { opacity:.55; }