/* prefmap.css v1.0 */
#prefmap { 
  --tile: 44px;              /* tile size (adjust for mobile) */
  --gap: 6px;
  --bg: #f8fafc;
  --grid-cols: 13;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  padding: 12px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
  width: 100%;
  overflow: hidden;
}


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

.prefmap-title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
}

.prefmap-updated {
  font-size: 12px;
  color: #64748b;
}

.prefmap-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #334155;
  margin: 8px 0 14px;
}

.prefmap-legend .swatch {
  width: 18px; height: 12px; border-radius: 3px; display: inline-block;
}

.prefmap-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), var(--tile));
  grid-auto-rows: var(--tile);
  gap: var(--gap);
  justify-content: center;
}

.pref {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #0f172a;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  user-select: none;
  transition: transform .08s ease, box-shadow .12s ease;
  background: #e2e8f0; /* default for zero */
}
.pref[data-count="0"] { background: #e2e8f0; color:#475569; }

.pref:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(2,6,23,0.12);
}

.pref .label {
  position: absolute;
  bottom: 4px;
  left: 6px;
  right: 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(15,23,42,.9);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  opacity: .9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align:center;
}
/* 北海道だけ大きく */
.pref.pref--wide {
  grid-column-end: span 2;
  grid-row-end: span 2;
  font-size: 16px;      /* 数字を少し大きく */
}
.pref.hokkaido {
  grid-row-end: span 2;   /* 縦に2マス分 */
  grid-column-end: span 2!important; /* 横に2マス分 */
  font-size: 1.2em;       /* 文字サイズも少し大きく */
}


/* Mobile tweaks */
@media (max-width: 520px) {
  #prefmap {
    overflow-x: auto;            /* 横スクロール許可 */
    -webkit-overflow-scrolling: touch; /* スムーズスワイプ */
  }

  .prefmap-grid {
    --cols: var(--grid-cols, 14);   /* 既存の列数を利用 */
    --gap: 6px;
    --tile: 36px;                   /* スマホのタイル幅（必要なら32〜40で調整） */
    width: calc(var(--cols) * var(--tile) + (var(--cols) - 1) * var(--gap));
    grid-template-columns: repeat(var(--cols), var(--tile));
    grid-auto-rows: var(--tile);
    justify-content: start;         /* 左寄せにしてスクロール開始位置を左端に */
  }

  .pref {
    font-size: 12px;                /* 数字 */
  }
  .pref .label {
    display: block;                 /* 県名も出す */
    font-size: 9px;
    bottom: 3px;
    left: 3px; right: 3px;
    text-shadow: none;
  }
}