/* Map-specific extracted styles migrating away from legacy gradients.
   We keep some original palette to avoid a jarring visual delta; gradually
   converge toward theme tokens. */

#controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background: var(--theme-cloth);
  border-radius: 16px;
  max-width: 340px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: var(--border-thick) solid var(--theme-shadow);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--theme-shadow);
}

.controls-header {
  padding: 18px 20px 14px 20px;
  border-bottom: var(--border-thick) solid var(--theme-shadow);
  background: var(--theme-accent);
  color:#fff;
}
.controls-header h3 { margin:0; font-size:1rem; font-weight:800; letter-spacing:.5px; }
.language-selector { display:flex; gap:6px; margin-top:10px; }
.lang-btn { background:var(--theme-cloth-alt); color:var(--theme-shadow); border:var(--border-thick) solid var(--theme-shadow); padding:6px 10px; font-weight:700; font-size:.65rem; cursor:pointer; box-shadow:3px 3px 0 0 var(--theme-shadow); }
.lang-btn.active { background:var(--theme-accent2); color:#111; }
.lang-btn:hover { background:var(--theme-accent); color:#fff; }
.nav-link { margin-top:10px; display:inline-block; font-size:.65rem; font-weight:800; letter-spacing:.5px; text-decoration:none; background:var(--theme-accent2); color:#111; padding:8px 12px 7px; border:var(--border-thick) solid var(--theme-shadow); box-shadow:3px 3px 0 0 var(--theme-shadow); }
.nav-link:hover { background:var(--theme-accent); color:#fff; }

.controls-content { padding:16px 18px 22px; overflow-y:auto; flex:1; }

/* Tabs */
.tab-buttons { display:flex; border:var(--border-thick) solid var(--theme-shadow); background:var(--theme-cloth-alt); box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--theme-shadow); margin:0 0 14px; }
.tab-button { flex:1; background:transparent; border:0; padding:12px 10px; font-weight:800; font-size:.75rem; letter-spacing:.5px; cursor:pointer; text-transform:uppercase; }
.tab-button.active { background:var(--theme-accent); color:#fff; }
.tab-button:not(.active):hover { background:var(--theme-accent2); color:#111; }

.filter-section { background:var(--theme-cloth-alt); padding:14px 14px 16px; border:var(--border-thick) solid var(--theme-shadow); box-shadow:4px 4px 0 0 var(--theme-shadow); margin:0 0 16px; }
.filter-section h4 { margin:0 0 10px; font-size:.75rem; letter-spacing:.5px; font-weight:800; text-transform:uppercase; }

#prefecture-filter, .search-input { width:100%; font:inherit; padding:10px 12px; border:var(--border-thick) solid var(--theme-shadow); background:var(--theme-cloth); font-size:.75rem; font-weight:600; }
#prefecture-filter:focus, .search-input:focus { outline:3px solid var(--theme-accent2); }

.prefecture-table { width:100%; border-collapse:collapse; font-size:.7rem; background:var(--theme-cloth); border:var(--border-thick) solid var(--theme-shadow); }
.prefecture-table th, .prefecture-table td { padding:6px 6px; border-bottom:1px solid var(--theme-shadow); }
.prefecture-table th { background:var(--theme-accent); color:#fff; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.prefecture-table tr:hover { background:var(--theme-accent2); cursor:pointer; }
.prefecture-table tr.selected { background:var(--theme-accent); color:#fff; }
.prefecture-table tr.no-pokefuta { opacity:.55; cursor:default; }
.prefecture-table tr.no-pokefuta:hover { background:transparent; }
.prefecture-code { background:var(--theme-accent2); color:#111; padding:2px 6px 3px; font-size:.55rem; font-weight:800; border:var(--border-thick) solid var(--theme-shadow); display:inline-block; }
.count-badge, .count-badge-zero { display:inline-block; padding:3px 8px 4px; font-size:.55rem; font-weight:800; border:var(--border-thick) solid var(--theme-shadow); box-shadow:2px 2px 0 0 var(--theme-shadow); }
.count-badge { background:var(--theme-accent); color:#fff; }
.count-badge-zero { background:var(--theme-cloth-alt); color:#555; }

/* Pokemon grid */
.pokemon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; max-height:300px; overflow-y:auto; border:var(--border-thick) solid var(--theme-shadow); padding:10px; background:var(--theme-cloth); box-shadow:4px 4px 0 0 var(--theme-shadow); }
.pokemon-item { padding:10px 8px 12px; border:var(--border-thick) solid var(--theme-shadow); background:var(--theme-cloth-alt); cursor:pointer; text-align:center; font-size:.65rem; font-weight:700; box-shadow:4px 4px 0 0 var(--theme-shadow); transition:background var(--transition), color var(--transition); }
.pokemon-item:hover { background:var(--theme-accent2); }
.pokemon-item.selected { background:var(--theme-accent); color:#fff; }
.pokemon-count { display:inline-block; margin-top:4px; background:var(--theme-accent2); padding:2px 6px 3px; font-size:.55rem; font-weight:800; border:var(--border-thick) solid var(--theme-shadow); }
.pokemon-item.selected .pokemon-count { background:var(--theme-cloth-alt); }

.reset-btn { background:var(--theme-accent); color:#fff; border:var(--border-thick) solid var(--theme-shadow); padding:12px 16px; font-weight:800; font-size:.8rem; width:100%; cursor:pointer; text-transform:uppercase; letter-spacing:.5px; box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--theme-shadow); margin-top:4px; }
.reset-btn:hover { background:var(--theme-accent2); color:#111; }

.stats { font-size:.6rem; display:flex; justify-content:space-between; margin-top:14px; padding-top:10px; border-top:var(--border-thick) solid var(--theme-shadow); }

#map { height:100%; }
.leaflet-popup-content-wrapper { border-radius:12px; }

/* Upload banner overlay (兄弟サイト案内) */
#sibling-site-banner {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1200; /* above controls */
  max-width: 320px;
  font-size: .7rem;
  font-weight: 600;
  background: linear-gradient(135deg,#222 0%,#333 60%,#444 100%);
  color: #fff;
  border: 4px solid var(--theme-accent2);
  box-shadow: 6px 6px 0 0 var(--theme-shadow);
  border-radius: 14px;
  transition: opacity var(--transition), transform var(--transition);
}
#sibling-site-banner[hidden] { display:none; }
.upload-banner__inner { padding: 10px 14px 12px; display:flex; flex-direction:column; gap:4px; }
.upload-banner__title { font-size:.75rem; letter-spacing:.5px; }
.upload-banner__body { line-height:1.3; font-weight:500; }
.upload-banner__link { color: var(--theme-accent2); font-weight:800; text-decoration:none; }
.upload-banner__link:hover { text-decoration:underline; }
.upload-banner__close { position:absolute; top:4px; right:6px; background:var(--theme-danger); color:#fff; border:2px solid var(--theme-shadow); cursor:pointer; padding:2px 6px 3px; font-size:.65rem; font-weight:800; border-radius:6px; }
.upload-banner__close:hover { background:#b13c3c; }
@media (max-width:768px){
  #sibling-site-banner { top:8px; left:8px; right:8px; max-width:none; }
}

@media (max-width: 768px) {
  #controls { position:fixed; top:auto; bottom:0; right:0; left:0; max-width:none; max-height:55vh; border-radius:16px 16px 0 0; }
}

/* Reduced motion override for map specifics */
@media (prefers-reduced-motion: reduce) { .pokemon-item:hover, .tab-button:not(.active):hover { transform:none; } }