/* ============================================================
   TW Game View Theme — Based on strateji-oyunu layout + TW CDN icons
   Scoped under #tw-game to avoid conflicts with dashboard CSS
   ============================================================ */

/* ---- Reset & Base ---- */
#tw-game {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #f4e4c1;
  color: #3e2415;
  min-height: 100vh;
  line-height: 1.5;
}

#tw-game * { box-sizing: border-box; }
#tw-game a { color: #603000; text-decoration: none; cursor: pointer; }
#tw-game a:hover { text-decoration: underline; color: #804000; }
#tw-game img { vertical-align: middle; border: 0; }
#tw-game b, #tw-game strong { color: #000; }

/* ---- Top Header (dark red bar like TW) ---- */
#tw-game .top-header {
  background: linear-gradient(to bottom, #8b6914, #6b4f10);
  padding: 5px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  border-bottom: 2px solid #4a3508;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 200;
}

#tw-game .menu-btn {
  background: linear-gradient(to bottom, #7a5a2a, #5a3a0a);
  border: 1px solid #3a2a00;
  border-radius: 8px;
  color: #f0d0a0;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  font-family: Verdana, Arial, sans-serif;
  text-shadow: 1px 1px 1px #000;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

#tw-game .menu-btn:hover {
  background: linear-gradient(to bottom, #8a6a3a, #6a4a1a);
}

#tw-game .menu-btn.active {
  background: linear-gradient(to bottom, #9a7a4a, #7a5a2a);
  box-shadow: 0 0 5px rgba(255, 200, 100, 0.5);
}

#tw-game .menu-btn img {
  width: 15px;
  height: 15px;
}

#tw-game .ranking-box {
  background: #f4e4c1;
  border: 1px solid #8b6914;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  color: #3e2415;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
}

/* ---- Quick Bar ---- */
#tw-game .quick-bar {
  background: linear-gradient(to bottom, #f4e4c1, #e8d4a8);
  border-bottom: 1px solid #c0a060;
  padding: 6px 10px;
  text-align: center;
}

#tw-game .quick-bar a {
  margin: 0 10px;
  font-weight: bold;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

#tw-game .quick-bar a img {
  width: 16px;
  height: 16px;
}

/* ---- Village Bar ---- */
#tw-game .village-bar {
  background: linear-gradient(to bottom, #e8d8b8, #d8c8a0);
  border-bottom: 1px solid #b0a070;
  padding: 5px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#tw-game .village-bar .village-name {
  font-weight: bold;
  font-size: 13px;
  color: #000;
}

#tw-game .village-bar .coords {
  color: #666;
  font-weight: normal;
  font-size: 12px;
}

#tw-game .village-bar .tw-village-select {
  border: 1px solid #b0a070;
  background: #f4e4c1;
  color: #3e2415;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
  max-width: 220px;
}

#tw-game .resources {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 11px;
}

#tw-game .res-item {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

#tw-game .res-item img {
  width: 18px;
  height: 18px;
}

#tw-game .res-val {
  font-weight: bold;
  color: #000;
}

#tw-game .res-warn {
  color: #b00 !important;
}

#tw-game .res-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  padding: 2px;
  cursor: pointer;
  opacity: 0.8;
  text-decoration: none;
  border: none;
  background: none;
  vertical-align: middle;
}

#tw-game .res-icon-btn:hover {
  opacity: 1;
}

#tw-game .res-icon-btn img {
  display: block;
}

/* ---- Main Wrap ---- */
#tw-game .main-wrap {
  max-width: 1100px;
  margin: 15px auto;
  padding: 0 15px;
}

/* ---- Overview Grid (left + right) ---- */
#tw-game .overview-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 15px;
}

/* ---- Panel (bordered box with gradient header) ---- */
#tw-game .panel {
  background: #fff9e8;
  border: 2px solid #c0a060;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}

#tw-game .panel-header {
  background: linear-gradient(to bottom, #d4b878, #c0a060);
  padding: 6px 10px;
  font-weight: bold;
  font-size: 13px;
  border-bottom: 1px solid #a08840;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#tw-game .panel-body {
  padding: 8px;
}

/* ---- Building Row (overview) ---- */
#tw-game .bld-row {
  display: flex;
  align-items: center;
  padding: 3px 5px;
  border-bottom: 1px solid #efe0c0;
  gap: 4px;
}

#tw-game .bld-row:hover {
  background: #f8f0d8;
}

#tw-game .bld-row:last-child {
  border-bottom: none;
}

#tw-game .bld-row img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

#tw-game .bld-name {
  font-weight: bold;
  color: #603000;
  cursor: pointer;
}

#tw-game .bld-name:hover {
  text-decoration: underline;
  color: #804000;
}

#tw-game .bld-level {
  color: #666;
}

#tw-game .bld-time {
  color: #888;
  font-size: 11px;
  margin-left: auto;
  white-space: nowrap;
}

#tw-game .bld-upgrading {
  color: #006400;
  font-weight: bold;
}

/* ---- Production Row ---- */
#tw-game .prod-row {
  display: flex;
  align-items: center;
  padding: 4px 0;
  gap: 8px;
  font-size: 12px;
}

#tw-game .prod-row img {
  width: 18px;
  height: 18px;
}

#tw-game .prod-val {
  font-weight: bold;
  margin-left: auto;
}

/* ---- Queue Row ---- */
#tw-game .queue-row {
  display: flex;
  align-items: center;
  padding: 5px 0;
  gap: 10px;
}

#tw-game .queue-row img {
  width: 22px;
  height: 22px;
}

#tw-game .queue-cancel {
  color: red;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  margin-left: auto;
}

/* ---- Unit Row ---- */
#tw-game .unit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}

#tw-game .unit-row img {
  width: 22px;
  height: 22px;
}

#tw-game .unit-count {
  font-weight: bold;
}

#tw-game .unit-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 12px;
}

#tw-game .unit-nav-btn {
  cursor: pointer;
  color: #c0a060;
  font-size: 16px;
  font-weight: bold;
}

/* ---- Data Table (HQ / Training) ---- */
#tw-game .data-table {
  width: 100%;
  margin: 10px 0;
  border: 1px solid #c0a060;
  border-collapse: collapse;
}

#tw-game .data-table th {
  background: linear-gradient(to bottom, #d4b878, #c0a060);
  padding: 6px 8px;
  text-align: left;
  font-size: 11px;
  border: 1px solid #a08840;
  font-weight: bold;
  color: #3e2415;
}

#tw-game .data-table td {
  padding: 5px 8px;
  border: 1px solid #e0d0a0;
  background: #fff9e8;
  font-size: 11px;
  vertical-align: middle;
}

#tw-game .data-table tr:nth-child(even) td {
  background: #f4ecd4;
}

#tw-game .data-table tr:hover td {
  background: #f0e8c8;
}

/* ---- Detail Header (building pages) ---- */
#tw-game .detail-header {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

#tw-game .detail-icon {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: #d4b878;
}

#tw-game .detail-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#tw-game .detail-info h2 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #3e2415;
}

#tw-game .detail-info p {
  color: #555;
  line-height: 1.5;
  margin: 0;
}

/* ---- Buttons ---- */
#tw-game .upgrade-btn {
  background: linear-gradient(to bottom, #c0a060, #a08840);
  border: 1px solid #806830;
  border-radius: 5px;
  color: white;
  padding: 4px 12px;
  cursor: pointer;
  font-weight: bold;
  font-size: 11px;
  font-family: Verdana, Arial, sans-serif;
  white-space: nowrap;
}

#tw-game .upgrade-btn:hover {
  background: linear-gradient(to bottom, #d0b070, #b09850);
}

#tw-game .upgrade-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

#tw-game .train-btn {
  background: linear-gradient(to bottom, #c0a060, #a08840);
  border: 1px solid #806830;
  border-radius: 5px;
  color: white;
  padding: 6px 16px;
  cursor: pointer;
  font-weight: bold;
  font-family: Verdana, Arial, sans-serif;
}

#tw-game .train-btn:hover {
  background: linear-gradient(to bottom, #d0b070, #b09850);
}

#tw-game .train-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

#tw-game .train-input {
  width: 50px;
  padding: 2px;
  border: 1px solid #c0a060;
  border-radius: 3px;
  text-align: center;
  font-size: 11px;
  font-family: Verdana, Arial, sans-serif;
}

/* Farm template buttons */
#tw-game .btn-farm-a {
  background: linear-gradient(to bottom, #90c060, #70a040);
  border: 1px solid #4a7028;
  border-radius: 4px;
  color: #fff;
  padding: 3px 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 11px;
  min-width: 28px;
}

#tw-game .btn-farm-b {
  background: linear-gradient(to bottom, #6090d0, #4070b0);
  border: 1px solid #2a4a80;
  border-radius: 4px;
  color: #fff;
  padding: 3px 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 11px;
  min-width: 28px;
}

#tw-game .btn-farm-c {
  background: linear-gradient(to bottom, #d09060, #b07040);
  border: 1px solid #804a28;
  border-radius: 4px;
  color: #fff;
  padding: 3px 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 11px;
  min-width: 28px;
}

#tw-game .btn-farm-a:hover { background: linear-gradient(to bottom, #a0d070, #80b050); }
#tw-game .btn-farm-b:hover { background: linear-gradient(to bottom, #70a0e0, #5080c0); }
#tw-game .btn-farm-c:hover { background: linear-gradient(to bottom, #e0a070, #c08050); }

#tw-game .btn-farm-a:disabled,
#tw-game .btn-farm-b:disabled,
#tw-game .btn-farm-c:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Bot start/stop buttons */
#tw-game .btn-start {
  background: linear-gradient(to bottom, #70a040, #508020);
  border: 1px solid #305010;
  border-radius: 5px;
  color: white;
  padding: 6px 16px;
  cursor: pointer;
  font-weight: bold;
  font-family: Verdana, Arial, sans-serif;
}

#tw-game .btn-stop {
  background: linear-gradient(to bottom, #cc4444, #aa2222);
  border: 1px solid #882222;
  border-radius: 5px;
  color: white;
  padding: 6px 16px;
  cursor: pointer;
  font-weight: bold;
  font-family: Verdana, Arial, sans-serif;
}

#tw-game .btn-default {
  background: linear-gradient(to bottom, #c0a060, #a08840);
  border: 1px solid #806830;
  border-radius: 5px;
  color: white;
  padding: 6px 16px;
  cursor: pointer;
  font-weight: bold;
  font-family: Verdana, Arial, sans-serif;
}

#tw-game .btn-start:disabled,
#tw-game .btn-stop:disabled,
#tw-game .btn-default:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---- Cost display ---- */
#tw-game .cost-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 6px;
  font-size: 11px;
  white-space: nowrap;
}

#tw-game .cost-item img {
  width: 14px;
  height: 14px;
}

#tw-game .cost-insufficient {
  color: #b00;
}

/* ---- Report color dots ---- */
#tw-game .report-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #999;
}

#tw-game .report-green { background: #0a0; }
#tw-game .report-yellow { background: #cc0; }
#tw-game .report-red { background: #c00; }
#tw-game .report-blue { background: #06c; }
#tw-game .report-grey { background: #999; }

/* ---- Pagination ---- */
#tw-game .tw-pagination {
  padding: 6px 0;
  text-align: center;
  font-size: 12px;
}

#tw-game .tw-pagination a,
#tw-game .tw-pagination span {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 1px;
}

#tw-game .tw-pagination a {
  color: #603000;
  text-decoration: underline;
  cursor: pointer;
}

#tw-game .page-active {
  font-weight: bold;
  color: #000;
  text-decoration: none;
}

/* ---- Messages ---- */
#tw-game .msg-success {
  color: #006400;
  background: #d4edda;
  border: 1px solid #006400;
  padding: 6px 10px;
  margin: 8px 0;
  border-radius: 4px;
  font-size: 12px;
}

#tw-game .msg-error {
  color: #b00;
  background: #fde8e8;
  border: 1px solid #b00;
  padding: 6px 10px;
  margin: 8px 0;
  border-radius: 4px;
  font-size: 12px;
}

/* ---- Badge ---- */
#tw-game .badge-green { background: #d4edda; color: #006400; padding: 2px 8px; border-radius: 3px; font-weight: bold; font-size: 11px; }
#tw-game .badge-red { background: #f8d7da; color: #721c24; padding: 2px 8px; border-radius: 3px; font-weight: bold; font-size: 11px; }
#tw-game .badge-yellow { background: #fff3cd; color: #856404; padding: 2px 8px; border-radius: 3px; font-weight: bold; font-size: 11px; }

/* ---- Loading ---- */
#tw-game .tw-loading {
  text-align: center;
  color: #888;
  padding: 40px;
  font-size: 13px;
}

/* ---- Tab Nav ---- */
#tw-game .tab-nav {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  border-bottom: 2px solid #c0a060;
  padding-bottom: 8px;
}

#tw-game .tab-nav a {
  font-weight: bold;
  padding-bottom: 8px;
  cursor: pointer;
}

#tw-game .tab-nav a.active {
  color: #cc6600;
  border-bottom: 2px solid #cc6600;
}

/* ---- Incoming Warning ---- */
#tw-game .incoming-warn {
  background: #fff0e0;
  border: 2px solid #e0a020;
  border-radius: 5px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #b00;
  font-weight: bold;
}

/* ---- Server Time ---- */
#tw-game .server-time {
  text-align: right;
  padding: 5px 15px;
  font-size: 11px;
  color: #666;
  max-width: 1100px;
  margin: 0 auto;
}

/* ---- Notepad ---- */
#tw-game .notepad-area {
  width: 100%;
  min-height: 40px;
  border: 1px solid #c0a060;
  background: #fff;
  color: #3e2415;
  font-size: 11px;
  padding: 4px;
  font-family: Verdana, Arial, sans-serif;
  border-radius: 3px;
  resize: vertical;
}

/* ---- Back Button ---- */
#tw-game .back-btn {
  background: linear-gradient(to bottom, #7a5a2a, #5a3a0a);
  border: 1px solid #3a2a00;
  border-radius: 8px;
  color: #f0d0a0;
  padding: 5px 14px;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  font-family: Verdana, Arial, sans-serif;
  text-shadow: 1px 1px 1px #000;
  text-decoration: none;
}

#tw-game .back-btn:hover {
  background: linear-gradient(to bottom, #8a6a3a, #6a4a1a);
  color: #fff;
}

/* ---- Inventory ---- */
#tw-game .inv-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: linear-gradient(to bottom, #f0e0c0, #e0d0a8);
  border: 1px solid #c0a060;
  border-radius: 4px;
}

#tw-game .inv-filter-select {
  border: 1px solid #b0a070;
  background: #f8f0e0;
  color: #3e2415;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 3px;
  font-family: Verdana, Arial, sans-serif;
  min-width: 140px;
}

#tw-game .inv-search {
  border: 1px solid #b0a070;
  background: #fff;
  color: #3e2415;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 3px;
  font-family: Verdana, Arial, sans-serif;
  flex: 1;
  max-width: 250px;
}

#tw-game .inv-grid {
  display: grid;
  grid-template-columns: repeat(5, 72px);
  gap: 0;
  border: 2px solid #b09060;
  background: #d8c8a0;
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
}

#tw-game .inv-slot {
  width: 72px;
  height: 72px;
  border: 1px solid #c0a868;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#tw-game .inv-slot-empty {
  background: linear-gradient(135deg, #e8d8b0, #d8c898);
}

#tw-game .inv-slot-filled {
  background: linear-gradient(135deg, #f0e0c0, #e0d0a8);
  cursor: pointer;
}

#tw-game .inv-slot-filled:hover {
  background: linear-gradient(135deg, #f8e8c8, #e8d8b0);
  box-shadow: inset 0 0 8px rgba(180, 140, 60, 0.3);
}

#tw-game .inv-slot img {
  max-width: 75%;
  max-height: 75%;
  object-fit: contain;
}

#tw-game .inv-count {
  position: absolute;
  top: 4px;
  left: 4px;
  background: #c82020;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  padding: 0 4px;
  font-family: Verdana, Arial, sans-serif;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  #tw-game .overview-grid {
    grid-template-columns: 1fr;
  }

  #tw-game .top-header {
    gap: 3px;
  }

  #tw-game .menu-btn {
    padding: 4px 8px;
    font-size: 10px;
  }

  #tw-game .village-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  #tw-game .resources {
    flex-wrap: wrap;
  }
}

/* ---- Building Interior Screens ---- */
#tw-game .back-link {
  display: inline-block;
  margin: 4px 0 12px;
  font-size: 11px;
  color: #603000;
  cursor: pointer;
  text-decoration: underline;
}
#tw-game .back-link:hover { color: #a06000; }

#tw-game .capacity-box {
  background: #f8f0d8;
  border: 1px solid #c0a060;
  border-radius: 4px;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  color: #603000;
}
#tw-game .capacity-value {
  font-size: 20px;
  font-weight: bold;
  color: #006400;
}
#tw-game .prod-rate {
  font-size: 20px;
  font-weight: bold;
  color: #006400;
}
#tw-game .upgrade-cost {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0;
}

/* ---- Quick Bar separator ---- */
#tw-game .quick-bar .qb-sep {
  color: #b0a070;
  font-size: 14px;
  margin: 0 4px;
}

/* ---- Top header premium button ---- */
#tw-game .menu-btn #tw-pp-count {
  color: #ffd700;
  font-weight: bold;
}

/* ---- Ranking box in top header ---- */
#tw-game .ranking-box #tw-ranking-text {
  font-size: 10px;
  font-weight: normal;
}

/* ---- Screen header ---- */
#tw-game .tw-screen-header {
  padding: 8px 12px;
  border-bottom: 1px solid #c0a060;
  margin-bottom: 10px;
}
#tw-game .tw-screen-header h2 {
  margin: 0;
  font-size: 16px;
  color: #603000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---- Clickable table rows ---- */
#tw-game .clickable-row {
  cursor: pointer;
}
#tw-game .clickable-row:hover {
  background: #f0e0c0 !important;
}

/* ---- Report detail ---- */
#tw-game .report-detail {
  padding: 12px;
}
#tw-game .report-subject {
  font-size: 14px;
  color: #603000;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #c0a060;
}
#tw-game .report-html {
  font-size: 12px;
  color: #3e2415;
  overflow-x: auto;
}
#tw-game .report-html table {
  border-collapse: collapse;
  margin: 4px 0;
}
#tw-game .report-html td, #tw-game .report-html th {
  border: 1px solid #c0a060;
  padding: 2px 6px;
  font-size: 11px;
}

/* ---- Small TW buttons ---- */
#tw-game .btn-tw-sm {
  background: linear-gradient(to bottom, #7a5a2a, #5a3a0a);
  border: 1px solid #3a2a00;
  border-radius: 4px;
  color: #f0d0a0;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
}
#tw-game .btn-tw-sm:hover {
  background: linear-gradient(to bottom, #8a6a3a, #6a4a1a);
}
#tw-game .btn-tw-sm:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---- Text helper ---- */
#tw-game .text-center { text-align: center; }

/* ---- Bot Settings Panels ---- */
#tw-game .bot-panel {
  border: 1px solid #a08050;
  background: linear-gradient(to bottom, #f8f0d8, #f0e4c8);
}
#tw-game .bot-panel .panel-header {
  background: linear-gradient(to bottom, #c09848, #a07838);
  color: #fff;
  font-size: 12px;
}
#tw-game .bot-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  cursor: pointer;
}
#tw-game .bot-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
}
#tw-game .bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px 12px;
}
#tw-game .bot-field {
  display: flex;
  align-items: center;
  gap: 4px;
}
#tw-game .bot-field label {
  font-size: 11px;
  color: #603000;
  white-space: nowrap;
}
#tw-game .bot-field input[type="number"],
#tw-game .bot-field select {
  width: 65px;
  padding: 2px 4px;
  font-size: 11px;
  border: 1px solid #c0a060;
  border-radius: 3px;
  background: #fff;
}
#tw-game .bot-field input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ---- Farm Assistant — TW-style sections ---- */
#tw-game .farm-section {
  border: 1px solid #c0a060;
  margin-bottom: 8px;
  background: #f5e6c8;
}
#tw-game .farm-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, #e8d4a8, #dcc898);
  border-bottom: 1px solid #c0a060;
  padding: 4px 8px;
  font-size: 12px;
  color: #422f11;
}
#tw-game .farm-section-body {
  padding: 6px 8px;
}

/* Template table */
#tw-game .farm-tpl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
#tw-game .farm-tpl-table th {
  padding: 4px 3px;
  text-align: center;
}
#tw-game .farm-tpl-table th img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
#tw-game .farm-tpl-table td {
  padding: 3px 2px;
  text-align: center;
}
#tw-game .farm-tpl-table .tpl-label {
  font-size: 14px;
  text-align: center;
  width: 24px;
}
#tw-game .tpl-input {
  width: 52px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #3d2200;
  padding: 3px 2px;
  border: 1px solid #c0a060;
  border-radius: 2px;
  background: #fff;
}

/* Farm Helper table — TNS style */
#tw-game .fh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #3d2200;
  table-layout: fixed;
}
#tw-game .fh-table thead th {
  background: #dfc898;
  border: 1px solid #c0a060;
  padding: 4px 4px;
  font-size: 11px;
  font-weight: 700;
  color: #422f11;
  text-align: center;
  vertical-align: middle;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
}
#tw-game .fh-table tbody td {
  border: 1px solid #d8c89c;
  padding: 4px 3px;
  text-align: center;
  vertical-align: middle;
  background: #f5e6c8;
  overflow: hidden;
}
#tw-game .fh-input {
  width: 50px;
  padding: 2px 3px;
  font-size: 13px;
  font-weight: 600;
  color: #3d2200;
  text-align: center;
  border: 1px solid #c0a060;
  border-radius: 2px;
  background: #fff;
}
#tw-game .fh-input-sm { width: 34px; }
#tw-game .fh-input-md { width: 42px; }
#tw-game .fh-tpl-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
#tw-game .fh-tpl-group label {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #422f11;
}
#tw-game .fh-table tbody td input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Farm target table */
#tw-game .farm-target-table { font-size: 12px; width: 100%; border-collapse: collapse; }
#tw-game .farm-target-table thead th {
  background: #dfc898;
  border: 1px solid #c0a060;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #422f11;
  text-align: center;
}
#tw-game .farm-target-table thead th:nth-child(3) { text-align: left; }
#tw-game .farm-target-table tbody td {
  padding: 3px 6px;
  border: 1px solid #e0d0a8;
}

/* Toggle switch */
#tw-game .farm-toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 18px;
}
#tw-game .farm-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
#tw-game .farm-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #c0a060;
  transition: .3s;
  border-radius: 18px;
}
#tw-game .farm-toggle-slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  transition: .3s;
  border-radius: 50%;
}
#tw-game .farm-toggle-switch input:checked + .farm-toggle-slider {
  background-color: #4a8;
}
#tw-game .farm-toggle-switch input:checked + .farm-toggle-slider::before {
  transform: translateX(18px);
}

/* Farm attack buttons */
#tw-game .farm-atk-btn {
  display: inline-block;
  min-width: 26px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #b09050;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
}
#tw-game .farm-atk-a {
  background: linear-gradient(to bottom, #ffe0b0, #e8c888);
  color: #804000;
}
#tw-game .farm-atk-a:hover { background: #ffd080; }
#tw-game .farm-atk-b {
  background: linear-gradient(to bottom, #e0e0ff, #c0c0e8);
  color: #404080;
}
#tw-game .farm-atk-b:hover { background: #d0d0ff; }
#tw-game .farm-atk-c {
  background: linear-gradient(to bottom, #e0ffe0, #c0e8c0);
  color: #408040;
}
#tw-game .farm-atk-c:hover { background: #d0ffd0; }
#tw-game .farm-atk-btn:disabled {
  opacity: 0.5;
  cursor: default;
}