/*! volcano-observation-viewer.css v1.2.0 — 中央配置・画像キーフレーム */
.vol-root{--navy:#102846;--gold:#f4cf5f;width:100%;height:100vh;height:100dvh;overflow:hidden;background:#d9e7f4;color:#fff}
.vol-root .shell{height:100%;min-height:0;background:linear-gradient(145deg,#d9e7f4,#f7fbff 56%,#dbe8f4)}
.vol-root .header{position:relative}.vol-root .title{color:#fff}
.vol-root .type-tabs{display:flex;justify-content:center;gap:6px;pointer-events:auto}
.vol-root .tab{border:0;cursor:pointer;font-weight:900;white-space:nowrap}
.vol-root .type-tabs .tab{min-height:36px;padding:0 14px;border-radius:11px;background:#ffffff20;color:#fff;font-size:13px}
.vol-root .type-tabs .tab[aria-selected="true"]{background:var(--gold);color:#102846;box-shadow:0 3px 10px #0003}
.vol-root .head-actions{align-items:center}.vol-root .view-tabs{padding:4px}.vol-root .full svg,.vol-root .tool svg{display:block;fill:currentColor}
.vol-root .full svg{width:20px;height:20px}
.vol-root .main{position:relative;left:50%;width:100vw;min-height:0;margin-left:-50vw!important;padding-left:0!important;padding-right:0!important;display:flex!important;align-items:center!important;justify-content:center!important}
.vol-root .stage{width:min(100%,calc((100dvh - 108px)*1672/941));max-height:100%;display:grid;grid-template-columns:1fr;gap:8px;align-items:center;justify-content:center}
.vol-root .stage.compare{width:min(100%,calc((100dvh - 190px)*3344/941));aspect-ratio:3344/941;grid-template-columns:1fr 1fr}
.vol-root .pane{position:relative;min-width:0;min-height:0;width:100%;height:100%;aspect-ratio:1672/941;overflow:hidden;border:5px solid #fff;border-radius:18px;background:#163f65;box-shadow:0 12px 34px #112b6e75;isolation:isolate}
.vol-root .scene{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;user-select:none;-webkit-user-drag:none}
.vol-root .mid,.vol-root .end{opacity:0}.vol-root .mid{z-index:2}.vol-root .end{z-index:3}
.vol-root .pane-title{position:absolute;z-index:15;top:12px;right:12px;padding:5px 10px;border-radius:999px;background:#0b274cdd;color:#fff;font-size:clamp(10px,1vw,15px);font-weight:900}
.vol-root .note{position:absolute;z-index:15;left:12px;bottom:12px;padding:6px 10px;border-radius:8px;background:#10243bc7;font-size:12px;font-weight:700}
.vol-root .labels{position:absolute;inset:0;z-index:8;pointer-events:none}.vol-root .labels span{position:absolute;padding:5px 10px;border:2px solid #fff9;border-radius:9px;background:#0b274cdd;color:#fff;font-size:clamp(10px,1.25vw,19px);font-weight:900;line-height:1;white-space:nowrap;text-shadow:0 2px 2px #0008;box-shadow:0 3px 8px #0004}
.vol-root .label-magma{left:45%;bottom:8%}.vol-root .label-vent{left:53%;top:42%}.vol-root .label-lava{right:7%;top:57%}
.vol-root .controls{position:fixed;inset:0;z-index:99990;width:auto;display:block;pointer-events:none}
.vol-root .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}
.vol-root .timeline{padding:8px 13px;border:1px solid #ffffff52;background:#091d37dc;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.vol-root .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}
.vol-root .tool{width:56px;min-width:56px;height:56px;padding:4px;border-radius:50%}.vol-root .tool span{font-size:9px}
.vol-root .ticks{position:relative;height:13px;display:block;padding:0}.vol-root .ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}.vol-root .ticks span:nth-child(1){left:0;transform:none}.vol-root .ticks span:nth-child(2){left:34%}.vol-root .ticks span:nth-child(3){left:68%}.vol-root .ticks span:nth-child(4){left:100%;transform:translateX(-100%)}
.vol-root .stage.compare .pane-title{display:block}.vol-root .stage.compare .labels span{font-size:clamp(8px,.72vw,12px);padding:3px 5px;border-width:1px}
.vol-root:fullscreen{width:100vw;height:100dvh;background:#d9e7f4}.vol-root:fullscreen .shell{height:100dvh}
body.admin-bar .vol-root{height:calc(100vh - 32px);height:calc(100dvh - 32px)}
@media(max-width:782px){body.admin-bar .vol-root{height:calc(100vh - 46px);height:calc(100dvh - 46px)}}
@media(max-width:1180px){.vol-root .type-tabs{max-width:50%}.vol-root .type-tabs .tab{padding:0 9px;font-size:11px}}
@media(max-width:720px){.vol-root .pane{border-width:3px;border-radius:10px}.vol-root .type-tabs{max-width:none;overflow-x:auto;justify-content:flex-start}.vol-root .type-tabs .tab{min-height:32px;padding:0 8px;font-size:10px}.vol-root .dock{width:min(680px,calc(100vw - 112px))}.vol-root .tool{width:46px;min-width:46px;height:46px}.vol-root .labels span{padding:3px 5px;border-width:1px}.vol-root .note{display:none}}
@media(max-width:570px){.vol-root .stage.compare .labels{display:none}.vol-root .dock{bottom:max(8px,env(safe-area-inset-bottom));width:calc(100vw - 100px)}.vol-root .toolbar{right:max(6px,env(safe-area-inset-right));bottom:max(70px,calc(env(safe-area-inset-bottom) + 70px));gap:5px}.vol-root .tool{width:39px;min-width:39px;height:39px;padding:7px}.vol-root .tool svg{width:22px;height:22px}.vol-root .tool span{display:none}.vol-root .timeline{padding:4px 7px}.vol-root .time{display:block;min-width:45px}}
@media(max-width:520px) and (orientation:portrait){.vol-root .type-tabs{position:absolute;left:8px;right:8px;top:5px;width:auto;max-width:none;transform:none;justify-content:center}.vol-root .type-tabs .tab{flex:1;max-width:108px}.vol-root .head-actions{width:100%;justify-content:center}}
@media(max-height:620px) and (orientation:landscape){.vol-root .stage:not(.compare){width:min(100%,calc((100dvh - 76px)*1672/941))}.vol-root .ticks{display:none}.vol-root .time{grid-row:1}.vol-root .dock{width:min(720px,calc(100vw - 96px));bottom:max(6px,env(safe-area-inset-bottom))}.vol-root .toolbar{right:max(6px,env(safe-area-inset-right));bottom:max(58px,calc(env(safe-area-inset-bottom) + 58px));gap:4px}.vol-root .tool{width:38px;min-width:38px;height:38px;padding:7px}.vol-root .tool span{display:none}}
@media(prefers-reduced-motion:reduce){.vol-root *{scroll-behavior:auto!important}}