* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: "Hiragino Sans", "Noto Sans JP", sans-serif; }

body { display: flex; flex-direction: column; }

#topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #2b3a55;
  color: #fff;
  flex-wrap: wrap;
}
#topbar h1 { font-size: 16px; margin: 0 8px 0 0; white-space: nowrap; }
#pref-select, #muni-select { padding: 5px 8px; font-size: 14px; max-width: 280px; }
#max-label { font-size: 12px; }
#max-pieces { padding: 4px 6px; font-size: 13px; margin-left: 4px; }
#start-btn, #retry-btn, #reselect-btn, #close-btn {
  padding: 5px 16px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  background: #ff9f43;
  color: #222;
  cursor: pointer;
  font-weight: bold;
}
#start-btn:disabled { background: #777; color: #bbb; cursor: default; }

#box-btn, #all-btn, #none-btn, #back-btn {
  padding: 4px 10px;
  font-size: 13px;
  border: 1px solid #9db2d0;
  border-radius: 4px;
  background: #3d4f70;
  color: #dfe8f5;
  cursor: pointer;
}
#box-btn.active { background: #ff9f43; border-color: #ff9f43; color: #222; font-weight: bold; }
#sel-count { font-size: 13px; background: rgba(255,255,255,.15); padding: 3px 10px; border-radius: 12px; }
#loading { font-size: 13px; color: #ffd98a; }

#stats { display: flex; gap: 14px; font-size: 14px; }
#stats[hidden] { display: none; }
#stats span { background: rgba(255,255,255,.15); padding: 3px 10px; border-radius: 12px; }
#hint { font-size: 12px; color: #cfd8ea; }

#map { flex: 1; background: #dfeaf2; }
#map.dragging-piece { cursor: grabbing; }
#map.box-select { cursor: crosshair; touch-action: none; }

.select-box {
  position: absolute;
  border: 2px dashed #ff7043;
  background: rgba(255,159,67,.15);
  z-index: 1500;
  pointer-events: none;
}

.piece-tooltip { font-size: 12px; }

#clear-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
#clear-overlay[hidden] { display: none; }
#clear-panel {
  background: #fff;
  padding: 28px 40px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
#clear-panel h2 { margin: 0 0 12px; }
#clear-panel button { margin: 12px 6px 0; }
#close-btn { background: #ccc; }