:root {
  --header-h: 52px;
  --tray-h: 112px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* 画面全体のバウンス・スクロールを防ぐ */
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.screen.hidden { display: none; }

/* ---------- ホーム画面 ---------- */
#screen-home {
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #eaf6ff 0%, #ffffff 100%);
  padding: 24px;
  gap: 8px;
}
.home-link {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  font-size: 18px;
  text-decoration: none;
}
.home-title {
  font-size: 28px;
  margin: 0;
  color: #2b3a4a;
}
.home-sub {
  margin: 0 0 12px;
  color: #5a6b7a;
  font-size: 16px;
}
.region-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 480px;
}
.region-btn {
  border: none;
  border-radius: 18px;
  padding: 22px 10px;
  font-size: 18px;
  font-weight: bold;
  color: #2b3a4a;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15);
  min-height: 88px;
  cursor: pointer;
}
.region-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.region-btn-national {
  grid-column: 1 / -1;
  background: linear-gradient(90deg, #ffd6a5, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff);
  font-size: 20px;
}

/* ---------- 盤面画面 ---------- */
.top-bar {
  height: var(--header-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  background: #ffffff;
  border-bottom: 1px solid #e0e6ea;
}
.region-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.region-title {
  font-size: 18px;
  font-weight: bold;
  color: #2b3a4a;
}
.timer-display {
  font-size: 12px;
  color: #8a97a3;
  font-variant-numeric: tabular-nums;
  min-height: 14px;
}
.icon-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: #f0f4f7;
  border-radius: 12px;
  font-size: 20px;
  cursor: pointer;
}
.icon-btn:active { background: #dfe7ec; }

.board-container {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  touch-action: none; /* ブラウザ標準のスクロール/ズームを止め、盤面自身のズーム処理に任せる */
  background: #dff0ff;
}
.board-svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
.pref-slot {
  vector-effect: non-scaling-stroke; /* ズームしても境界線の太さを一定に保つ */
}
.pref-slot.unplaced {
  stroke-dasharray: 5 3;
}
.pref-slot.placed {
  stroke-dasharray: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: pop-in 0.25s ease-out;
}
@keyframes pop-in {
  0%   { transform: scale(0.9); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.pref-label {
  font-size: 12px;
  fill: #263238;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: #ffffffcc;
  stroke-width: 3px;
  display: none;
}
.pref-label.label-visible {
  display: inline;
}
.okinawa-divider {
  stroke: #9aa5ad;
  stroke-width: 1.5;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.minimap-wrap {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 60px;
  background: #ffffffcc;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  padding: 5px;
  pointer-events: none; /* 盤面のズーム/パン操作を邪魔しない、ただの飾り */
}
.minimap-svg {
  width: 100%;
  height: auto;
  display: block;
}
.minimap-wrap.hidden {
  display: none;
}

.zoom-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.zoom-btn {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: #ffffffee;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  font-size: 24px;
  font-weight: bold;
  color: #2b3a4a;
  cursor: pointer;
}
.zoom-btn-wide {
  width: auto;
  border-radius: 28px;
  padding: 0 16px;
  font-size: 14px;
}
.zoom-btn:active { background: #eef3f6; }

/* ---------- トレイ（ピース置き場） ---------- */
.tray {
  flex: 0 0 var(--tray-h);
  background: #ffffff;
  border-top: 1px solid #e0e6ea;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x; /* 横スクロールだけ許可。ピース自体はjs/input.jsが個別に処理する */
  -webkit-overflow-scrolling: touch;
}

/* ---------- ピース（トレイ内・運搬中とも共通） ---------- */
.piece {
  flex: 0 0 auto;
  touch-action: none;
  cursor: grab;
}
.piece-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.piece-label {
  /* font-sizeは県ごとにjs/tray.jsが動的に設定する（都道府県間で見た目の大きさを揃えるため） */
  fill: #263238;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: #ffffffcc;
  stroke-width: 3px;
}
.piece-hidden {
  visibility: hidden; /* 運搬中、元の場所には枠だけ残す（レイアウトを崩さないため） */
}
.piece-selected .piece-svg path {
  stroke: #ff7a3d;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 4px rgba(255,122,61,0.7));
}

/* ---------- 運搬中ピースのレイヤー ---------- */
.drag-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}
.piece-dragging {
  position: fixed;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}

/* ---------- 完成画面 ---------- */
.completion-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 40, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.completion-overlay.hidden { display: none; }
.completion-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  width: min(320px, 84vw);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  animation: pop-in 0.3s ease-out;
}
.completion-title {
  font-size: 28px;
  font-weight: bold;
  color: #2b3a4a;
  margin-bottom: 8px;
}
.completion-sub {
  font-size: 16px;
  color: #5a6b7a;
  margin-bottom: 24px;
}
.completion-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.completion-btn {
  border: none;
  border-radius: 14px;
  padding: 14px;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  background: #4caf7d;
  cursor: pointer;
}
.completion-btn-secondary {
  background: #eef3f6;
  color: #2b3a4a;
}

/* ---------- せってい画面 ---------- */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 40, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2100;
}
.settings-overlay.hidden { display: none; }
.settings-card {
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.25);
}
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e0e6ea;
  flex: 0 0 auto;
}
.settings-title {
  font-size: 18px;
  font-weight: bold;
  color: #2b3a4a;
}
.settings-body {
  overflow-y: auto;
  padding: 8px 16px 24px;
}
.settings-group {
  padding: 14px 0;
  border-bottom: 1px solid #f0f4f7;
}
.settings-group-label {
  font-size: 14px;
  color: #5a6b7a;
  margin-bottom: 8px;
}
.settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-option {
  border: 2px solid #e0e6ea;
  background: #ffffff;
  color: #2b3a4a;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
}
.settings-option.active {
  border-color: #4caf7d;
  background: #eafaf1;
  color: #227a4e;
  font-weight: bold;
}