/*!
 * kaikogata-tsunami.css
 * 「海溝型地震と津波が起こるしくみ」固有のスタイル。
 * simファミリー共通の sim-ui-core.css を先に読み込んだ上で使う。
 */

.kaikogata-root .kaikogata-shell{
  background:linear-gradient(145deg,#d9e7f4,#f7fbff 56%,#dbe8f4);
}
.kaikogata-root .simui-pane{
  background:#1a6ca4;
}
/* 単独表示では、固定フロートのタイムライン用に空けていた余白も舞台に使う。 */
.kaikogata-root .simui-stage:not(.is-compare){
  width:min(100%,calc((100dvh - 108px)*1672/941));
}
.kaikogata-root .simui-controls{
  position:fixed;inset:0;z-index:99990;width:auto;display:block;pointer-events:none;
}
.kaikogata-root .simui-bottom-dock{
  position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));
  width:min(900px,calc(100vw - 132px));transform:translateX(-50%);pointer-events:auto;
}
.kaikogata-root .simui-timeline{
  padding:8px 13px;border:1px solid #ffffff52;background:#091d37dc;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.kaikogata-root .simui-toolbar{
  position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(86px,calc(env(safe-area-inset-bottom) + 86px));
  display:flex;flex-direction:column;gap:7px;pointer-events:auto;
}
.kaikogata-root .simui-tool{
  width:56px;min-width:56px;height:56px;padding:4px;border-radius:50%;
}
.kaikogata-root .simui-tool-label{font-size:9px}
.kaikogata-root:fullscreen{width:100vw;height:100dvh;background:#d9e7f4}
.kaikogata-root:fullscreen .kaikogata-shell{height:100dvh}

/* ---- 重ね合わせ画像レイヤーの重ね順（.simui-scene に足す形） ---- */
.kaikogata-start{z-index:0}
.kaikogata-moving-layer{z-index:1;transform-origin:50% 50%;will-change:transform,opacity}
.kaikogata-ocean-layer{
  /* 寒色の海洋プレートの輪郭だけを追う。右側の暖色地盤を含めない。 */
  clip-path:polygon(0 43.2%,34% 43.2%,41% 44.2%,45.5% 47%,49% 52.8%,54% 60%,62% 69%,72% 80%,83.5% 92%,91.5% 100%,0 100%);
  transform-origin:42% 51%;
}
.kaikogata-land-layer{
  /* 固着で曲がる海溝直近の先端だけ。町側の地盤は常に固定する。 */
  clip-path:polygon(46.2% 42.4%,49.2% 41.4%,53.8% 42.1%,58.5% 44.2%,62.5% 47.5%,61.2% 53.8%,57% 52.2%,53% 50.2%,49.7% 48.7%,47.2% 47%);
  transform-origin:51% 47%;
}
/* SVGオーバーレイ（震源グロー・地震波・矢印等）は画像レイヤーより手前、完成図より奥に表示する */
.kaikogata-root .simui-fx-layer{z-index:3}
.kaikogata-end-img{z-index:4;opacity:0;will-change:opacity}

/* ---- SVGオーバーレイのモーション・発光表現 ---- */
.kaikogata-motion-path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kaikogata-arrow-shape{stroke:#fff;stroke-width:4;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:url(#kaikogataSectionBlueGlow)}
.kaikogata-arrow-shape.blue{fill:#bff7ff}
.kaikogata-arrow-shape.orange{fill:#ff9d32;filter:url(#kaikogataSectionGlow)}
.kaikogata-shock{fill:none;stroke:#ffd15b;stroke-width:8;filter:url(#kaikogataSectionGlow)}
.kaikogata-uplift{fill:none;stroke:#effcff;stroke-width:9;stroke-linecap:round;filter:url(#kaikogataSectionBlueGlow)}
.kaikogata-wave-guide{fill:none;stroke:#62edff;stroke-width:12;stroke-linecap:round;filter:url(#kaikogataSectionBlueGlow)}
.kaikogata-aerial-ring{fill:none;stroke:#ffd15b;stroke-width:7;filter:url(#kaikogataAerialGlow)}
.kaikogata-uplift-zone{fill:#62edff;stroke:#eaffff;stroke-width:6;stroke-dasharray:18 13;filter:url(#kaikogataAerialBlueGlow)}
.kaikogata-tsunami-front{fill:none;stroke:#c9fbff;stroke-width:11;stroke-linecap:round;filter:url(#kaikogataAerialBlueGlow)}

/* ---- ペイン左上・右上のバッジ ---- */
.kaikogata-pane-title{position:absolute;z-index:8;left:2.2%;top:2.3%;padding:.35em .8em;border-radius:999px;background:#09233dd6;color:#fff;font-size:clamp(10px,1.05vw,17px);font-weight:950;box-shadow:0 3px 12px #00000033}
.kaikogata-diagram-note{position:absolute;z-index:8;right:2.2%;top:2.3%;padding:.35em .65em;border-radius:8px;background:#ffffffe6;color:#536b80;font-size:clamp(8px,.72vw,12px);font-weight:850}
.simui-stage.is-compare .kaikogata-pane-title{font-size:clamp(8px,.72vw,13px)}
.simui-stage.is-compare .kaikogata-diagram-note{font-size:clamp(7px,.55vw,10px)}

/* 同時表示は、断面図と上空図を左右に同じ大きさで並べる。 */
.kaikogata-root .simui-stage.is-compare{
  width:min(100%,calc((100dvh - 190px)*3344/941));aspect-ratio:3344/941;gap:8px;
}
.kaikogata-root .simui-stage.is-compare #kaikogataSectionPane,
.kaikogata-root .simui-stage.is-compare #kaikogataAerialPane{
  position:relative;inset:auto;width:calc((100% - 8px)/2);height:100%;aspect-ratio:1672/941;flex:0 0 calc((100% - 8px)/2);
  border-width:5px;border-radius:18px;box-shadow:0 12px 34px #112b6e75;
}
.kaikogata-root .simui-stage.is-compare .kaikogata-labels{font-size:75%}

/* タグの位置をJSの場面開始時刻（34秒中）と一致させる。 */
.kaikogata-root .simui-scene-ticks{position:relative;height:13px;display:block;padding:0}
.kaikogata-root .simui-scene-ticks span{position:absolute;left:var(--tick);top:0;transform:translateX(-50%);white-space:nowrap}
.kaikogata-root .simui-scene-ticks span:first-child{transform:none}

/* ---- ラベル置き場（位置は各ラベルIDごとに個別指定） ---- */
.kaikogata-labels{position:absolute;inset:0;z-index:7;pointer-events:none}
#kaikogataOceanLabel{left:12%;top:47%;--dot:#86c4e8}
#kaikogataLandLabel{left:67%;top:43%;--dot:#e5a84f}
#kaikogataFocusLabel{left:43%;top:56%;--dot:#ff9e25}
#kaikogataEpicenterLabel{left:17%;top:67%;--dot:#ff9e25}
#kaikogataUpliftLabel{left:25%;top:48%;--dot:#69e9ff}
#kaikogataAerialTsunamiLabel{left:48%;top:33%;--dot:#a9f6ff}

@media(max-width:720px){
  .kaikogata-diagram-note{display:none}
  .kaikogata-root .simui-stage.is-compare #kaikogataSectionPane,
  .kaikogata-root .simui-stage.is-compare #kaikogataAerialPane{border-width:3px;border-radius:10px}
  .kaikogata-root .simui-bottom-dock{width:min(680px,calc(100vw - 112px))}
  .kaikogata-root .simui-tool{width:46px;min-width:46px;height:46px}
}
@media(max-width:570px){
  .kaikogata-pane-title{font-size:clamp(8px,2.6vw,10px)}
  .kaikogata-labels .simui-label{font-size:clamp(7px,2.35vw,10px);padding:2px 4px}
  .kaikogata-root .simui-stage.is-compare .kaikogata-labels{display:none}
  .kaikogata-root .simui-bottom-dock{left:50%;bottom:max(8px,env(safe-area-inset-bottom));width:calc(100vw - 100px)}
  .kaikogata-root .simui-toolbar{right:max(6px,env(safe-area-inset-right));bottom:max(70px,calc(env(safe-area-inset-bottom) + 70px));flex-direction:column;gap:5px}
  .kaikogata-root .simui-tool{width:39px;min-width:39px;height:39px;padding:7px}
  .kaikogata-root .simui-tool svg{width:22px;height:22px}
  .kaikogata-root .simui-tool-label{display:none}
  .kaikogata-root .simui-timeline{padding:4px 7px}
  .kaikogata-root .simui-time{display:block;min-width:45px}
}
@media(max-height:620px) and (orientation:landscape){
  .kaikogata-root .simui-stage:not(.is-compare){width:min(100%,calc((100dvh - 76px)*1672/941))}
  .kaikogata-pane-title{font-size:9px}
  .kaikogata-diagram-note{display:none}
  .kaikogata-root .simui-scene-ticks{display:none}
  .kaikogata-root .simui-time{grid-row:1}
  .kaikogata-root .simui-bottom-dock{width:min(720px,calc(100vw - 96px));bottom:max(6px,env(safe-area-inset-bottom))}
  .kaikogata-root .simui-toolbar{right:max(6px,env(safe-area-inset-right));bottom:max(58px,calc(env(safe-area-inset-bottom) + 58px));gap:4px}
  .kaikogata-root .simui-tool{width:38px;min-width:38px;height:38px;padding:7px}
  .kaikogata-root .simui-tool svg{width:21px;height:21px}
  .kaikogata-root .simui-tool-label{display:none}
}
@media(prefers-reduced-motion:reduce){
  .simui-stage{transition:none}
}