/* ============================================================
   妖怪マップ — ドットの日本地図（トップのプレビューと /map/）
   ============================================================ */

.jp-map { display: block; width: 100%; height: auto; }
.jp-map .d { fill: #3b3260; }
.jp-map .d.has { fill: #6a5aa8; }
.jp-map .inset { fill: none; stroke: #4a3f78; stroke-width: .25; stroke-dasharray: .8 .5; }
.jp-map .inset-label { fill: #9a90bf; font-size: 1.6px; font-family: 'DotGothic16', sans-serif; }
.jp-map .pin-glow { fill: rgba(242, 193, 78, .28); animation: pin-pulse 1.8s steps(3) infinite; }
.jp-map .pin-core { fill: #f2c14e; }
.jp-map .pin-count { fill: #fdf6e3; font-size: 2px; font-family: 'Press Start 2P', monospace; }
.jp-map a.pin { cursor: pointer; }
.jp-map a.pin:hover .pin-core, .jp-map a.pin.active .pin-core { fill: #e0394e; }
.jp-map a.pin:focus { outline: none; }
.jp-map a.pin:focus-visible .pin-glow { fill: rgba(79, 208, 192, .6); }
@keyframes pin-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* トップのプレビュー */
.map-teaser {
  display: block; max-width: 560px; margin: 0 auto; padding: 18px;
  background: #1a1430; box-shadow: inset 0 0 0 3px #38305a;
}
.map-teaser:hover { box-shadow: inset 0 0 0 3px #f2c14e; }

/* /map/ ページ */
.map-page { max-width: 980px; margin: 0 auto; padding: 36px 20px 20px; position: relative; z-index: 2; }
.map-title { font-size: clamp(30px, 6vw, 46px); font-weight: 400; letter-spacing: 4px; text-shadow: 3px 3px 0 #e0394e; }
.map-lead { color: #9a90bf; margin: 10px 0 4px; }
.map-hint { color: #f2c14e; font-size: 13px; margin-bottom: 18px; }
.map-wrap {
  position: relative; background: #1a1430; padding: 16px;
  box-shadow: inset 0 0 0 3px #38305a; margin-bottom: 40px;
}
.map-wrap .jp-map { max-width: 720px; margin: 0 auto; }

.map-panel {
  position: absolute; right: 16px; bottom: 16px; width: min(340px, calc(100% - 32px));
  max-height: calc(100% - 32px); overflow-y: auto;
  background: #241c3a; padding: 16px 16px 12px;
  box-shadow: 0 0 0 3px #f2c14e, 0 10px 0 -2px rgba(0, 0, 0, .45);
}
.map-panel-close {
  position: absolute; top: 6px; right: 8px; background: none; border: 0; color: #9a90bf;
  font-size: 22px; line-height: 1; cursor: pointer; font-family: inherit;
}
.map-panel-close:hover { color: #f2c14e; }
.map-panel-pref { color: #f2c14e; font-size: 16px; letter-spacing: 2px; margin-bottom: 8px; }

.map-sub-title { font-size: 24px; font-weight: 400; letter-spacing: 3px; margin-bottom: 18px; text-shadow: 3px 3px 0 rgba(224, 57, 78, .45); }
.regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.region { background: #241c3a; padding: 16px; box-shadow: inset 0 0 0 2px #38305a; }
.region-title { color: #4fd0c0; font-size: 16px; font-weight: 400; letter-spacing: 2px; margin-bottom: 10px; }
.region-note { color: #9a90bf; font-size: 13px; margin-bottom: 10px; }

.mp-list { list-style: none; display: grid; gap: 10px; }
.mp-item { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; text-decoration: none; color: #f4ecd8; }
.mp-item .sc-thumb { width: 56px; height: 56px; }
.mp-item:hover .mp-name { color: #f2c14e; }
.mp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-pref { font-size: 11px; color: #4fd0c0; letter-spacing: 1px; }
.mp-name { font-size: 16px; letter-spacing: 1px; }
.mp-note { font-size: 12px; color: #9a90bf; line-height: 1.6; }

.map-credit { color: #6e6478; font-size: 11px; margin-top: 30px; text-align: center; }

@media (max-width: 640px) {
  .map-panel { position: static; width: auto; max-height: none; margin-top: 14px; }
}