/* CSS Variables */
:root {
  --primary-color: #3b82f6;
  --primary-hover: #2563eb;
  --secondary-color: #64748b;
  --success-color: #059669;
  --background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --surface: rgba(255, 255, 255, 0.95);
  --surface-hover: rgba(241, 245, 249, 0.9);
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: #64748b;
  --border: rgba(226, 232, 240, 0.6);
  --border-hover: #cbd5e1;
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --radius: 0.75rem;
  --sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--sans-serif);
  background: var(--background);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding: 1.5rem 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

header p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Loading overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading-overlay.loaded {
  opacity: 0;
  visibility: hidden;
}

.loading-text {
  margin-top: 1rem;
  font-size: 1.2rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Spinner */
.lds-spinner {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: var(--primary-color);
}

.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Main content layout */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1;
}

/* Map container */
.map-container {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
  height: 65vh;
  min-height: 400px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.map-display {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  height: 100%;
  position: relative;
  width: 100%;
}

/* Controls panel */
.controls-panel {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.control-section h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* 選択された県名表示用のスタイル */
.selected-prefecture {
  font-weight: 700;
  color: var(--primary-color);
  background: rgba(59, 130, 246, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  font-size: 1rem;
  transition: all 0.3s ease;
}

/* Prefecture buttons */
.prefecture-buttons {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.3rem;
  max-height: 200px;
  overflow-y: auto;
  padding: 0.25rem;
}

.prefecture-buttons::-webkit-scrollbar {
  width: 6px;
}

.prefecture-buttons::-webkit-scrollbar-track {
  background: var(--surface-hover);
  border-radius: 3px;
}

.prefecture-buttons::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 3px;
}

.prefecture-buttons::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color);
}

.prefecture-buttons button {
  border: none;
  color: white;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  min-height: 28px;
  max-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.prefecture-buttons button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
}

.prefecture-buttons button:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Modern checkbox - チェックボックス専用（ホバー効果なし） */
.checkbox-wrapper {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  border: none;
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  grid-column: span 1;
  /* ホバー効果を無効化 */
  transition: none;
}

/* ホバー効果を完全に削除 */
.checkbox-wrapper:hover {
  transform: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  filter: none;
}

.modern-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  font-weight: 600;
  color: white;
  margin: 0;
  font-size: 0.7rem;
  white-space: nowrap;
}

.checkbox-custom {
  width: 12px;
  height: 12px;
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.checkbox-custom::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #059669;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modern-checkbox:checked + .checkbox-label .checkbox-custom {
  background: white;
  border-color: #059669;
}

.modern-checkbox:checked + .checkbox-label .checkbox-custom::after {
  opacity: 1;
}

/* 地方別の色分け */
/* 北海道・東北地方 - 緑系 */
.ken27,
.ken21,
.ken40,
.ken10,
.ken17,
.ken14,
.ken34 {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

/* 関東地方 - オレンジ系 */
.ken12,
.ken6,
.ken9,
.ken32,
.ken29,
.ken31,
.ken47 {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
}

/* 中部地方 - 青系 */
.ken44,
.ken30,
.ken35,
.ken36,
.ken7,
.ken23,
.ken20,
.ken11,
.ken5 {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
}

/* 近畿地方 - 黄系 */
.ken25,
.ken8,
.ken1,
.ken22,
.ken28,
.ken38,
.ken15 {
  background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
}

/* 中国地方 - 水色系 */
.ken41,
.ken39,
.ken18,
.ken26,
.ken33 {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
}

/* 四国地方 - ピンク系 */
.ken42,
.ken4,
.ken37,
.ken45 {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
}

/* 九州・沖縄地方 - 紫系 */
.ken19,
.ken2,
.ken16,
.ken3,
.ken24,
.ken46,
.ken43,
.ken13 {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
}

/* Map message */
.message {
  font-family: var(--sans-serif);
  font-weight: 600;
  fill: white;
  paint-order: stroke;
  stroke: #000;
  stroke-width: 2px;
  text-anchor: middle;
  pointer-events: none;
}

/* Responsive design */
@media (max-width: 1024px) {
  .container {
    padding: 0.75rem;
  }

  .main-content {
    gap: 1rem;
  }

  .map-container {
    height: 55vh;
    min-height: 350px;
  }

  .prefecture-buttons {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.4rem;
  }

  .prefecture-buttons button {
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
    min-height: 40px;
  }
}

@media (max-width: 768px) {
  header h1 {
    font-size: 2rem;
  }

  header p {
    font-size: 1rem;
  }

  .map-container {
    height: 50vh;
    min-height: 300px;
  }

  .prefecture-buttons {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.3rem;
  }

  .prefecture-buttons button {
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
    min-height: 36px;
  }

  .controls-panel {
    padding: 1rem;
  }

  .control-section h3 {
    flex-direction: column;
    gap: 0.25rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0.5rem;
  }

  header {
    padding: 1rem 0;
    margin-bottom: 1rem;
  }

  header h1 {
    font-size: 1.75rem;
  }

  .map-container {
    height: 45vh;
    min-height: 250px;
  }

  .prefecture-buttons {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 0.25rem;
  }

  .prefecture-buttons button {
    padding: 0.4rem 0.5rem;
    font-size: 0.7rem;
    min-height: 32px;
  }

  .checkbox-wrapper {
    padding: 0.5rem 1rem;
    gap: 0.5rem;
  }
}