/* =========================================================
   USOMAP / view3d — 立体ビューのオーバーレイ
   ========================================================= */
.v3d{
  position:fixed;inset:0;z-index:70;display:none;
  background:#0d141b;
}
.v3d.show{display:flex;flex-direction:column}

.v3d-stage{flex:1;min-height:0;position:relative;cursor:grab}
.v3d-stage:active{cursor:grabbing}
.v3d-stage canvas{width:100%;height:100%;display:block}

.v3d-busy{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#0d141b;z-index:2;
}
.v3d-busy.hide{display:none}
.v3d-loader{display:flex;flex-direction:column;align-items:center;gap:22px}

/* 地層が下から順に積み上がる ── 地形が組み上がる感じの待ち時間表示 */
.v3d-strata{
  width:132px;height:74px;position:relative;
  perspective:340px;
}
.v3d-strata i{
  position:absolute;left:50%;bottom:0;display:block;
  height:9px;border-radius:2px;
  background:linear-gradient(90deg,rgba(203,162,90,.15),rgba(203,162,90,.6),rgba(203,162,90,.15));
  transform-origin:50% 100%;
  animation:strata 1.9s cubic-bezier(.4,0,.2,1) infinite;
  opacity:0;
}
.v3d-strata i:nth-child(1){width:126px;margin-left:-63px;bottom:0;  animation-delay:0s}
.v3d-strata i:nth-child(2){width:102px;margin-left:-51px;bottom:13px;animation-delay:.13s}
.v3d-strata i:nth-child(3){width:78px; margin-left:-39px;bottom:26px;animation-delay:.26s}
.v3d-strata i:nth-child(4){width:52px; margin-left:-26px;bottom:39px;animation-delay:.39s}
.v3d-strata i:nth-child(5){width:26px; margin-left:-13px;bottom:52px;animation-delay:.52s}
@keyframes strata{
  0%  {opacity:0; transform:translateY(16px) rotateX(62deg) scaleX(.7)}
  22% {opacity:1; transform:translateY(0)    rotateX(62deg) scaleX(1)}
  70% {opacity:1; transform:translateY(0)    rotateX(62deg) scaleX(1)}
  100%{opacity:0; transform:translateY(-6px) rotateX(62deg) scaleX(1)}
}
.v3d-step{
  display:flex;align-items:center;gap:11px;
  font-family:var(--jp);font-size:12.5px;letter-spacing:.1em;color:var(--txt-3);
}
.v3d-step .sp{
  width:13px;height:13px;border:2px solid rgba(203,162,90,.25);
  border-top-color:var(--brass);border-radius:50%;
  animation:spin .8s linear infinite;flex:none;
}
@media (prefers-reduced-motion:reduce){
  .v3d-strata i{animation:none;opacity:1}
  .v3d-step .sp{animation:none}
}

/* ---- 上のバー ---- */
.v3d-top{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:linear-gradient(180deg,rgba(13,20,27,.86),rgba(13,20,27,0));
  pointer-events:none;
}
.v3d-top > *{pointer-events:auto}
.v3d-title{
  font-family:var(--mincho);font-size:14px;color:var(--txt-2);letter-spacing:.08em;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.v3d-title b{color:var(--brass);font-weight:500}
.v3d-top .sp{margin-left:auto}

/* ---- 下のコントロール ---- */
.v3d-bar{
  flex:none;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,var(--bg1),var(--bg0));
  border-top:1px solid var(--line);
}
.v3d-ctl{display:flex;align-items:center;gap:9px;min-width:0}
.v3d-ctl label{
  font-size:12px;color:var(--txt-3);white-space:nowrap;letter-spacing:.04em;
}
.v3d-ctl .v{
  font-family:var(--la);font-size:13px;color:var(--brass);min-width:34px;
  text-align:right;font-variant-numeric:tabular-nums;
}
.v3d-ctl input[type=range]{width:118px}
.v3d-bar .sp{margin-left:auto}
.v3d-bar .tg{padding:7px 11px}

@media (max-width:820px){
  .v3d-bar{gap:10px 14px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .v3d-ctl input[type=range]{width:84px}
  .v3d-ctl label{font-size:11.5px}
  .v3d-top{padding:10px 12px}
  .v3d-title{font-size:12.5px}
}