/* =========================================================
   USOMAP / stage — 地図ステージ・ツールバー・ブラシ
   ========================================================= */
main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;
  padding:16px 16px 12px;min-height:0}
.stagewrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden}
.stage{
  position:relative;border-radius:3px;transform-origin:center center;
  box-shadow:var(--sh),0 0 0 1px #000,0 0 0 8px #1d160f,0 0 0 9px #3a2d1b;
  will-change:transform;
}
.stage canvas{display:block;border-radius:2px}
.stage.editing{box-shadow:var(--sh),0 0 0 1px #000,0 0 0 8px #1d160f,0 0 0 9px #7a5c22}
.stage.editing canvas{cursor:none;touch-action:none}
/* スマホでもピンチで拡大縮小できるように、ブラウザ既定のジェスチャーへ渡さない */
.stagewrap{touch-action:none}
/* 配置モード中はどこに置くかが分かるように */
.stage.placing canvas{cursor:crosshair}

/* 移動・消すモードで「今これを触れる」対象に出す明滅リング */
.pickring{
  position:absolute;display:none;pointer-events:none;z-index:6;
  width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(255,214,120,.95);
  box-shadow:0 0 0 3px rgba(20,12,4,.35), 0 0 14px rgba(255,200,90,.55);
  transform:translate(-50%,-50%);
  animation:pickPulse 1.1s ease-in-out infinite;
}
.pickring.show{display:block}
@keyframes pickPulse{
  0%,100%{opacity:1;   transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:.35; transform:translate(-50%,-50%) scale(1.22)}
}
@media (prefers-reduced-motion:reduce){ .pickring{animation:none} }
.stage.panning{cursor:grabbing}

.brushring{position:absolute;border:1.5px solid rgba(255,240,200,.85);border-radius:50%;
  pointer-events:none;display:none;box-shadow:0 0 0 1px rgba(0,0,0,.5),
  inset 0 0 0 1px rgba(0,0,0,.35);transform:translate(-50%,-50%)}
.stage.editing .brushring.show{display:block}

.stagebar{flex:none;display:flex;align-items:center;gap:8px;margin-top:11px;
  flex-wrap:wrap;justify-content:center}
.stagebar .sep{width:1px;height:20px;background:var(--line);margin:0 2px}
.stagebar .zoomv{font-family:var(--la);font-size:12.5px;color:var(--txt-3);
  min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.maptitle{font-size:12.5px;color:var(--txt-3);letter-spacing:.06em}
.maptitle b{color:var(--brass);font-weight:500}

.busy{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(20,15,9,.45);backdrop-filter:blur(1px);z-index:20;
  font-family:var(--la);letter-spacing:.22em;color:var(--brass);font-size:14px}
.busy.show{display:flex}
.busy .sp{width:15px;height:15px;border:2px solid rgba(203,162,90,.28);
  border-top-color:var(--brass);border-radius:50%;margin-right:11px;
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}