html,
body {

  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  font-family:
    Arial,
    "Yu Gothic",
    sans-serif;

  background: #05070c;

}


/* ========================================
   MAP
======================================== */

#map {

  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  z-index: 1;

}


/* ========================================
   OBSERVER
======================================== */

#observerView {

  position: fixed;

  inset: 0;

  z-index: 2;

  visibility: hidden;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.25s ease;

}


#observerView.active {

  visibility: visible;

  opacity: 1;

  pointer-events: auto;

}


#observerSky {

  position: absolute;

  inset: 0;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 50% 100%,
      #18264a 0%,
      #091126 35%,
      #040711 75%,
      #010207 100%
    );

}


/* ========================================
   STARS
======================================== */

.stars {

  position: absolute;

  inset: 0;

  opacity: 0.65;

  pointer-events: none;

}


.stars1 {

  background-image:

    radial-gradient(
      white 0.7px,
      transparent 0.8px
    );

  background-size:
    47px 47px;

}


.stars2 {

  background-image:

    radial-gradient(
      rgba(180,210,255,.8) 0.6px,
      transparent 0.8px
    );

  background-size:
    73px 73px;

  background-position:
    21px 33px;

}


/* ========================================
   GROUND
======================================== */

#observerGround {

  position: absolute;

  left: 0;
  right: 0;

  height: 100%;

  background:

    linear-gradient(
      to bottom,

      rgba(15,22,31,.95),

      rgba(4,6,8,1)
    );

  z-index: 2;

}


.groundGlow {

  position: absolute;

  top: 0;

  width: 100%;
  height: 80px;

  background:

    linear-gradient(
      to bottom,

      rgba(255,150,70,.07),

      transparent
    );

}


/* ========================================
   HORIZON
======================================== */

#observerHorizon {

  position: absolute;

  left: 0;

  width: 100%;

  height: 1px;

  background:
    rgba(80,200,255,.85);

  box-shadow:

    0 0 8px
    rgba(80,200,255,.7);

  z-index: 8;

}


#observerHorizon span {

  position: absolute;

  right: 25px;

  top: 7px;

  color:
    rgba(130,220,255,.8);

  font-size: 10px;

}


/* ========================================
   FIREWORK
======================================== */

#observerFirework {

  position: absolute;

  transform:
    translate(-50%, -50%);

  min-width: 8px;
  min-height: 8px;

  border-radius: 50%;

  z-index: 6;

  background:

    radial-gradient(

      circle,

      white 0%,

      #fff7b0 3%,

      rgba(255,180,60,.9) 8%,

      rgba(255,100,30,.35) 28%,

      transparent 65%

    );

  filter:

    drop-shadow(
      0 0 8px
      rgba(255,180,70,.8)
    );

}


.observer-firework-ring {

  position: absolute;

  border-radius: 50%;

  border:

    1px dashed
    rgba(255,210,100,.75);

}


.ring1 {

  inset: 5%;

}


.ring2 {

  inset: 22%;

}


.ring3 {

  inset: 39%;

}


.observer-firework-core {

  position: absolute;

  left: 50%;
  top: 50%;

  width: 6px;
  height: 6px;

  transform:
    translate(-50%,-50%);

  border-radius: 50%;

  background: white;

  box-shadow:

    0 0 10px white,

    0 0 20px #ffb74d;

}


/* ========================================
   OBSERVER GRID
======================================== */

.observer-grid {

  position: absolute;

  background:
    rgba(255,255,255,.09);

  z-index: 10;

  pointer-events: none;

}


.observer-grid-h1 {

  top: 33.333%;

  width: 100%;
  height: 1px;

}


.observer-grid-h2 {

  top: 66.666%;

  width: 100%;
  height: 1px;

}


.observer-grid-v1 {

  left: 33.333%;

  width: 1px;
  height: 100%;

}


.observer-grid-v2 {

  left: 66.666%;

  width: 1px;
  height: 100%;

}


/* ========================================
   CENTER
======================================== */

.observer-center-h {

  position: absolute;

  left: calc(50% - 20px);
  top: 50%;

  width: 40px;
  height: 1px;

  background:
    rgba(255,255,255,.35);

  z-index: 11;

}


.observer-center-v {

  position: absolute;

  left: 50%;
  top: calc(50% - 20px);

  width: 1px;
  height: 40px;

  background:
    rgba(255,255,255,.35);

  z-index: 11;

}


/* ========================================
   COMPASS
======================================== */

#observerCompass {

  position: absolute;

  top: 25px;
  left: 50%;

  transform:
    translateX(-50%);

  padding:
    7px 18px;

  color: white;

  background:
    rgba(0,0,0,.45);

  border:
    1px solid
    rgba(255,255,255,.2);

  border-radius: 20px;

  font-family:
    monospace;

  z-index: 20;

}


/* ========================================
   HUD
======================================== */

#observerHUD {

  position: absolute;

  left: 50%;
  bottom: 25px;

  transform:
    translateX(-50%);

  min-width: 500px;

  padding:
    10px 20px;

  color:
    rgba(255,255,255,.9);

  background:
    rgba(0,0,0,.55);

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius: 8px;

  text-align: center;

  font-family:
    monospace;

  font-size: 12px;

  line-height: 1.8;

  z-index: 20;

}


/* ========================================
   WARNING
======================================== */

#observerWarning {

  display: none;

  position: absolute;

  top: 80px;
  left: 50%;

  transform:
    translateX(-50%);

  padding:
    8px 15px;

  color:
    #ffd54f;

  background:
    rgba(0,0,0,.65);

  border:
    1px solid
    rgba(255,200,50,.5);

  border-radius: 6px;

  z-index: 30;

}


#observerWarning.visible {

  display: block;

}


/* ========================================
   MODE BUTTON
======================================== */

#modeButtons {

  position: fixed;

  top: 20px;
  left: 50%;

  transform:
    translateX(-50%);

  display: flex;

  gap: 5px;

  padding: 5px;

  background:
    rgba(15,15,20,.82);

  border-radius: 9px;

  z-index: 100;

}


.mode-button {

  width: auto;

  margin: 0;

  padding:
    8px 15px;

  border-radius: 6px;

  background:
    transparent;

  color: #cccccc;

}


.mode-button.active {

  color: #111111;

  background: white;

}


/* ========================================
   3D TERRAIN CHECK MODAL (Ver.1.7.0-dev.4)
======================================== */

#terrain3DModal {

  position: fixed;
  inset: 0;

  z-index: 2000;

  display: none;

  flex-direction: column;

  background: #0b0f14;

}

#terrain3DModal.active {

  display: flex;

}

#terrain3DHeader {

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 16px;

  background: rgba(15,15,20,.92);

  color: #fff;

  font-size: 15px;
  font-weight: 700;

  flex: 0 0 auto;

}


#terrain3DViewControls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.terrain3DViewButton {
  width: auto;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}

.terrain3DViewButton.active {
  background: #fff;
  color: #11151a;
  border-color: #fff;
}

#terrain3DCloseButton {

  width: auto;
  margin: 0;

  padding: 7px 14px;

  border-radius: 6px;

  background: rgba(255,255,255,.12);

  color: #fff;

  font-weight: 600;
  font-size: 13px;

}

#terrain3DMapContainer {

  flex: 1 1 auto;

  position: relative;

}

#terrain3DMapContainer .maplibregl-canvas-container {

  cursor: grab;

}

#terrain3DHint {

  flex: 0 0 auto;

  padding: 8px 14px;

  font-size: 12px;

  color: #b8c2cc;

  background: rgba(15,15,20,.92);

  text-align: center;

}

@media (max-width: 820px) {

  #terrain3DHeader {

    font-size: 13px;

    padding: 10px 12px;

  }

  #terrain3DHint {

    font-size: 11px;

  }

}


/* ========================================
   TERRAIN CROSS-SECTION MODAL (Ver.1.7.0-dev.27)
======================================== */

#terrainProfileModal {

  position: fixed;
  inset: 0;

  z-index: 2000;

  display: none;

  flex-direction: column;

  background: #0b0f14;

}

#terrainProfileModal.active {

  display: flex;

}

#terrainProfileHeader {

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 16px;

  background: rgba(15,15,20,.92);

  color: #fff;

  font-size: 15px;
  font-weight: 700;

  flex: 0 0 auto;

}

#terrainProfileCloseButton {

  width: auto;
  margin: 0;

  padding: 7px 14px;

  border-radius: 6px;

  background: rgba(255,255,255,.12);

  color: #fff;

  font-weight: 600;
  font-size: 13px;

}

#terrainProfileBody {

  flex: 1 1 auto;

  display: flex;

  min-height: 0;

  overflow: hidden;

}

#terrainProfileChartWrap {

  flex: 1 1 auto;

  min-width: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 10px;

  overflow: auto;

}

#terrainProfileChart {

  width: 100%;
  max-width: 1100px;

}

#terrainProfileChart svg {

  width: 100%;
  height: auto;
  display: block;

}

#terrainProfileDiagnosis {

  flex: 0 0 300px;

  border-left: 1px solid rgba(255,255,255,.1);

  background: rgba(15,15,20,.55);

  color: #e7edf3;

  overflow-y: auto;

  padding: 14px;

  font-size: 13px;
  line-height: 1.6;

}

#terrainProfileDiagnosisContent .tpRow {

  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;

  padding: 6px 0;

  border-bottom: 1px dashed rgba(255,255,255,.12);

}

#terrainProfileDiagnosisContent .tpTitle {

  font-size: 14px;
  font-weight: 700;

  margin: 2px 0 8px;

}

#terrainProfileDiagnosisContent .tpNote {

  margin-top: 10px;

  font-size: 12px;
  color: #9fb0c0;

  line-height: 1.6;

}

#terrainProfileDiagnosisContent .tpBadgeOk { color: #4caf50; font-weight: 700; }
#terrainProfileDiagnosisContent .tpBadgeWarn { color: #ffb300; font-weight: 700; }
#terrainProfileDiagnosisContent .tpBadgeBad { color: #f44336; font-weight: 700; }

#terrainProfileHint {

  flex: 0 0 auto;

  padding: 8px 14px;

  font-size: 12px;

  color: #b8c2cc;

  background: rgba(15,15,20,.92);

  text-align: center;

}

@media (max-width: 820px) {

  #terrainProfileHeader {

    font-size: 13px;

    padding: 10px 12px;

  }

  #terrainProfileBody {

    flex-direction: column;

  }

  #terrainProfileDiagnosis {

    flex: 0 0 auto;

    max-height: 40vh;

    border-left: none;
    border-top: 1px solid rgba(255,255,255,.1);

  }

  #terrainProfileHint {

    font-size: 11px;

  }

}


/* ========================================
   PANEL
======================================== */

#panel {

  position: fixed;

  top: 20px;
  left: 20px;

  width: 320px;

  max-height:
    calc(100vh - 40px);

  overflow-y: auto;

  box-sizing: border-box;

  padding: 18px;

  color: white;

  background:
    rgba(20,20,25,.93);

  border-radius: 12px;

  box-shadow:
    0 4px 20px
    rgba(0,0,0,.4);

  z-index: 50;

}


#panel h1 {

  margin:
    0 0 5px;

  font-size: 20px;

}


#panel h2 {

  margin:
    14px 0 12px;

  font-size: 15px;

}


.version {

  margin:
    0 0 18px;

  color: #aaaaaa;

  font-size: 12px;

}


#panel hr {

  margin:
    18px 0;

  border: 0;

  border-top:

    1px solid
    rgba(255,255,255,.3);

}


/* ========================================
   FORM
======================================== */

button {

  width: 100%;

  margin-bottom: 10px;

  padding: 10px;

  border: 0;

  border-radius: 6px;

  cursor: pointer;

}


.setting-row {

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 10px;

  margin:
    10px 0;

}


.setting-row label {

  font-size: 13px;

}


select {

  min-width: 140px;

  padding: 6px;

  border-radius: 4px;

}


.input-unit {

  display: flex;

  align-items: center;

  gap: 5px;

}


input[type="number"] {

  width: 75px;

  padding: 6px;

  box-sizing: border-box;

}


/* ========================================
   TILT
======================================== */

.tilt-section {

  margin-top: 14px;

  padding: 10px;

  background:
    rgba(255,255,255,.06);

  border-radius: 8px;

}


#cameraTiltSlider {

  width: 100%;

  accent-color:
    #ff9800;

}


.tilt-scale {

  display: flex;

  justify-content:
    space-between;

  margin-bottom: 10px;

  color: #888888;

  font-size: 9px;

}


.composition-buttons {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 5px;

}


.composition-buttons button {

  margin: 0;

  font-size: 11px;

}


/* ========================================
   RESULTS
======================================== */

#result,
#cameraResult {

  font-size: 13px;

  line-height: 1.5;

}


#result p,
#cameraResult p {

  margin:
    8px 0;

}


#cameraResult {

  margin-top: 12px;

  padding: 10px;

  background:
    rgba(255,255,255,.06);

  border-radius: 7px;

}


.frame-percent strong {

  color:
    #ffd54f;

  font-size: 16px;

}


/* ========================================
   MINI VIEWFINDER
======================================== */

#viewfinder {

  position: relative;

  width: 100%;

  aspect-ratio:
    3 / 2;

  overflow: hidden;

  border:
    3px solid
    rgba(255,255,255,.75);

  border-radius: 7px;

  box-sizing: border-box;

  background:
    #070b16;

}


#viewfinder.portrait {

  width: 70%;

  margin:
    0 auto;

  aspect-ratio:
    2 / 3;

}


#viewfinderSky {

  position: absolute;

  inset:
    0 0 40px 0;

  overflow: hidden;

  background:

    linear-gradient(

      #050814,

      #10182b

    );

}


.third-line {

  position: absolute;

  background:
    rgba(255,255,255,.09);

}


.third-horizontal-1 {

  top: 33.333%;

  width: 100%;
  height: 1px;

}


.third-horizontal-2 {

  top: 66.666%;

  width: 100%;
  height: 1px;

}


.third-vertical-1 {

  left: 33.333%;

  width: 1px;
  height: 100%;

}


.third-vertical-2 {

  left: 66.666%;

  width: 1px;
  height: 100%;

}


.vf-crosshair-horizontal {

  position: absolute;

  left: 43%;
  top: 50%;

  width: 14%;
  height: 1px;

  background:
    rgba(255,255,255,.3);

}


.vf-crosshair-vertical {

  position: absolute;

  left: 50%;
  top: 45%;

  width: 1px;
  height: 10%;

  background:
    rgba(255,255,255,.3);

}


#horizonLine {

  position: absolute;

  left: 0;

  width: 100%;
  height: 1px;

  background:
    #64cfff;

}


#horizonLine span {

  position: absolute;

  right: 4px;
  top: 3px;

  color:
    #8edcff;

  font-size: 8px;

}


#fireworkPreview {

  position: absolute;

  transform:
    translate(-50%,-50%);

  border-radius: 50%;

  background:

    radial-gradient(

      circle,

      white,

      #ffd166 7%,

      rgba(255,120,30,.5) 30%,

      transparent 70%

    );

}


.firework-core {

  position: absolute;

  left: 50%;
  top: 50%;

  width: 4px;
  height: 4px;

  transform:
    translate(-50%,-50%);

  border-radius: 50%;

  background: white;

}


#viewfinderInfo {

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  min-height: 40px;

  padding: 5px;

  box-sizing: border-box;

  color: #dddddd;

  background:
    rgba(0,0,0,.9);

  text-align: center;

  font-size: 9px;

  z-index: 20;

}


/* ========================================
   SCROLL
======================================== */

#panel::-webkit-scrollbar {

  width: 6px;

}


#panel::-webkit-scrollbar-thumb {

  background:
    rgba(255,255,255,.25);

  border-radius: 10px;

}


/* =========================================================
   Ver.0.8
   実カメラフレーム
========================================================= */


/* ========================================
   撮影者視点全体
======================================== */

#observerView {

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background:

    radial-gradient(
      circle at center,
      #10182d 0%,
      #050914 55%,
      #02040a 100%
    );

}


/* ========================================
   背景
======================================== */

#observerBackground {

  position: absolute;

  inset: 0;

  background-image:

    radial-gradient(
      circle,
      rgba(255,255,255,0.5) 1px,
      transparent 1px
    );

  background-size:
    80px 80px;

  opacity: 0.35;

}


/* ========================================
   カメラフレーム配置領域
======================================== */

#cameraFrameWrapper {

  position: absolute;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  display: flex;

  align-items: center;
  justify-content: center;

  width: calc(100% - 380px);

  height: calc(100% - 120px);

  pointer-events: none;

}


/* ========================================
   実カメラフレーム
======================================== */

#cameraFrame {

  position: relative;

  overflow: hidden;

  background: #050914;

  border:
    2px solid
    rgba(255,255,255,0.9);

  box-shadow:

    0 0 0 9999px
    rgba(0,0,0,0.50),

    0 0 30px
    rgba(0,0,0,0.8);

}


/* ========================================
   横位置
   フルサイズ 36 × 24 mm
   = 3 : 2
======================================== */

#cameraFrame.landscape {

  aspect-ratio: 3 / 2;

}


/* ========================================
   縦位置
   24 × 36 mm
   = 2 : 3
======================================== */

#cameraFrame.portrait {

  aspect-ratio: 2 / 3;

}


/* ========================================
   フレーム内部
======================================== */

#cameraSky {

  position: absolute;

  inset: 0;

  overflow: hidden;

  background:

    linear-gradient(
      to bottom,
      #020612 0%,
      #071126 60%,
      #101927 100%
    );

}


/* ========================================
   グリッド
======================================== */

.camera-grid {

  position: absolute;

  pointer-events: none;

  background:
    rgba(255,255,255,0.10);

}


/* 縦 */

.camera-grid-v1 {

  top: 0;
  bottom: 0;

  left: 33.333%;

  width: 1px;

}


.camera-grid-v2 {

  top: 0;
  bottom: 0;

  left: 66.666%;

  width: 1px;

}


/* 横 */

.camera-grid-h1 {

  left: 0;
  right: 0;

  top: 33.333%;

  height: 1px;

}


.camera-grid-h2 {

  left: 0;
  right: 0;

  top: 66.666%;

  height: 1px;

}


/* ========================================
   水平線
======================================== */

#cameraHorizon {

  position: absolute;

  left: 0;

  width: 100%;

  height: 1px;

  background:
    rgba(80,210,255,0.95);

  box-shadow:

    0 0 5px
    rgba(80,210,255,0.7);

  transform:
    translateY(-50%);

}


#cameraHorizon span {

  position: absolute;

  right: 8px;

  bottom: 5px;

  color:
    rgba(100,220,255,0.9);

  font-size: 10px;

}


/* ========================================
   花火
======================================== */

#observerFirework {

  position: absolute;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  pointer-events: none;

}


.observer-firework-glow {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,

      rgba(255,255,230,1) 0%,

      rgba(255,205,90,0.95) 8%,

      rgba(255,155,45,0.70) 25%,

      rgba(255,110,30,0.30) 50%,

      transparent 72%

    );

  filter:
    blur(4px);

}


.observer-firework-ring {

  position: absolute;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);

  border:

    1px dashed
    rgba(255,190,70,0.8);

  border-radius: 50%;

}


.ring-outer {

  width: 100%;
  height: 100%;

}


.ring-middle {

  width: 60%;
  height: 60%;

}


.ring-inner {

  width: 25%;
  height: 25%;

}


.observer-firework-core {

  position: absolute;

  top: 50%;
  left: 50%;

  width: 8%;
  height: 8%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    white;

  box-shadow:

    0 0 10px white,

    0 0 20px
    rgba(255,190,70,1);

}


/* ========================================
   中央クロス
======================================== */

#cameraCrosshair {

  position: absolute;

  top: 50%;
  left: 50%;

  width: 28px;
  height: 28px;

  transform:
    translate(-50%, -50%);

  opacity: 0.6;

}


.crosshair-horizontal {

  position: absolute;

  top: 50%;
  left: 0;

  width: 100%;
  height: 1px;

  background:
    rgba(255,255,255,0.7);

}


.crosshair-vertical {

  position: absolute;

  top: 0;
  left: 50%;

  width: 1px;
  height: 100%;

  background:
    rgba(255,255,255,0.7);

}


/* ========================================
   3分割線
======================================== */

.third-line {

  position: absolute;

  background:
    rgba(255,255,255,0.08);

}


.third-line-top {

  left: 0;
  right: 0;

  top: 33.333%;

  height: 1px;

}


.third-line-bottom {

  left: 0;
  right: 0;

  top: 66.666%;

  height: 1px;

}


.third-line-left {

  top: 0;
  bottom: 0;

  left: 33.333%;

  width: 1px;

}


.third-line-right {

  top: 0;
  bottom: 0;

  left: 66.666%;

  width: 1px;

}


/* ========================================
   撮影情報
======================================== */

#observerInfo {

  position: absolute;

  left: 50%;
  bottom: 20px;

  transform:
    translateX(-50%);

  min-width: 430px;

  padding:
    10px 20px;

  text-align: center;

  color: white;

  font-size: 13px;

  line-height: 1.7;

  background:
    rgba(0,0,0,0.72);

  border:

    1px solid
    rgba(255,255,255,0.2);

  border-radius:
    8px;

  z-index: 20;

}


.info-separator {

  margin:
    0 10px;

  opacity: 0.4;

}

/* =========================================================
   Ver.0.8 FINAL OVERRIDES
   実カメラフレーム固定・ウィンドウサイズ非依存
========================================================= */

#observerView {
  position: fixed;
  inset: 0;
}

#cameraFrameWrapper {
  position: absolute;
  top: 50%;
  left: calc(50% + 170px);
  transform: translate(-50%, -50%);
  width: calc(100vw - 400px);
  height: calc(100vh - 150px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/*
  フレームは必ずセンサー比率を維持する。
  width と height を別々に 100% にしないのが重要。
*/
#cameraFrame.landscape {
  width: min(calc(100vw - 420px), calc((100vh - 170px) * 1.5));
  height: auto;
  aspect-ratio: 3 / 2;
}

#cameraFrame.portrait {
  height: min(calc(100vh - 170px), calc((100vw - 420px) * 1.5));
  width: auto;
  aspect-ratio: 2 / 3;
}

#observerSky {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#observerGround {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
}

#observerHorizon {
  position: absolute;
  left: 0;
  width: 100%;
}

#observerFirework {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

@media (max-width: 800px) {
  #cameraFrameWrapper {
    left: 50%;
    width: calc(100vw - 30px);
    height: calc(100vh - 180px);
  }

  #cameraFrame.landscape {
    width: min(calc(100vw - 40px), calc((100vh - 190px) * 1.5));
  }

  #cameraFrame.portrait {
    height: min(calc(100vh - 190px), calc((100vw - 40px) * 1.5));
  }
}


/* ========================================
   Ver.1.7.0-dev.1 REAL FIREWORK
   Visual layer only; geometry remains unchanged.
======================================== */
#observerFirework {
  background: transparent !important;
  filter: none !important;
  border-radius: 50%;
  overflow: visible;
  pointer-events: none;
}
#observerFirework .observer-firework-ring,
#observerFirework .observer-firework-core {
  display: none !important;
}
#observerFirework .fw170-glow {
  position:absolute;
  inset:14%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,245,.95) 0 2%, rgba(255,205,100,.34) 8%, rgba(255,145,45,.11) 24%, transparent 62%);
  filter:blur(.8px);
}
#observerFirework .fw170-core {
  position:absolute;
  left:50%; top:50%;
  width:4px; height:4px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fffbe8;
  box-shadow:0 0 5px rgba(255,225,150,.9),0 0 12px rgba(255,150,55,.55);
}
#observerFirework .fw170-ray {
  position:absolute;
  left:50%; top:50%;
  width:var(--w);
  height:var(--l);
  transform-origin:50% 0%;
  transform:rotate(var(--a)) translateX(-50%);
  opacity:var(--o);
  border-radius:999px;
  background:linear-gradient(to bottom, rgba(255,255,238,.98), rgba(255,218,130,.92) 18%, rgba(255,145,58,.72) 55%, rgba(255,92,35,.14) 88%, transparent);
  box-shadow:0 0 2px rgba(255,190,90,.55);
}
#observerFirework .fw170-spark {
  position:absolute;
  left:50%; top:50%;
  width:var(--s); height:var(--s);
  border-radius:50%;
  background:#fff2bf;
  box-shadow:0 0 3px rgba(255,170,70,.8);
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--r) * -1));
  transform-origin:center;
}

/* Ver.1.7.0-dev.2 firework types */
#observerFirework .fw170-ray-botan{height:calc(var(--l)*.82);background:linear-gradient(to bottom,rgba(255,255,244,.98),rgba(255,207,112,.9) 20%,rgba(255,125,48,.55) 64%,transparent 94%)}
#observerFirework .fw170-ray-kamuro{background:linear-gradient(to bottom,rgba(255,250,210,.98),rgba(255,205,95,.88) 24%,rgba(240,153,55,.6) 62%,rgba(215,105,35,.16) 92%,transparent)}
#observerFirework .fw170-spark-kamuro{opacity:.45}
#observerFirework .fw170-glow.fw170-botan{opacity:.55;transform:scale(.88)}
#observerFirework .fw170-glow.fw170-kamuro{opacity:.42}
#observerFirework .fw170-glow.fw170-senrin{opacity:.24}
#observerFirework .fw170-mini{position:absolute;width:16%;height:16%;transform:translate(-50%,-50%)}
#observerFirework .fw170-mini-ray{position:absolute;left:50%;top:50%;width:.7px;height:48%;transform-origin:50% 0%;transform:rotate(var(--a));background:linear-gradient(to bottom,rgba(255,255,225,.96),rgba(255,178,70,.72),transparent);box-shadow:0 0 1px rgba(255,180,75,.5)}

/* Ver.1.7.0-dev.3: multiple blooms / fan starmine */
#observerFirework .fw170-placement{
  position:absolute; width:100%; height:100%;
  transform:translate(-50%,-50%);
  overflow:visible;
}
#observerFirework .fw170-bloom{
  position:absolute; inset:0;
  transform:scale(var(--bscale));
  transform-origin:50% 50%;
}
#observerFirework .fw170-bloom .fw170-glow,
#observerFirework .fw170-bloom .fw170-core,
#observerFirework .fw170-bloom .fw170-ray,
#observerFirework .fw170-bloom .fw170-spark,
#observerFirework .fw170-bloom .fw170-mini{
  position:absolute;
}



/* ========================================
   Ver.1.8.0-dev.2 MULTI FIREWORK OBSERVER
======================================== */
/* ========================================
   Ver.1.7.0-dev.1 REAL FIREWORK
   Visual layer only; geometry remains unchanged.
======================================== */
.observer-firework-v180 {
  background: transparent !important;
  filter: none !important;
  border-radius: 50%;
  overflow: visible;
  pointer-events: none;
}
.observer-firework-v180 .observer-firework-ring,
.observer-firework-v180 .observer-firework-core {
  display: none !important;
}
.observer-firework-v180 .fw170-glow {
  position:absolute;
  inset:14%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,245,.95) 0 2%, rgba(255,205,100,.34) 8%, rgba(255,145,45,.11) 24%, transparent 62%);
  filter:blur(.8px);
}
.observer-firework-v180 .fw170-core {
  position:absolute;
  left:50%; top:50%;
  width:4px; height:4px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fffbe8;
  box-shadow:0 0 5px rgba(255,225,150,.9),0 0 12px rgba(255,150,55,.55);
}
.observer-firework-v180 .fw170-ray {
  position:absolute;
  left:50%; top:50%;
  width:var(--w);
  height:var(--l);
  transform-origin:50% 0%;
  transform:rotate(var(--a)) translateX(-50%);
  opacity:var(--o);
  border-radius:999px;
  background:linear-gradient(to bottom, rgba(255,255,238,.98), rgba(255,218,130,.92) 18%, rgba(255,145,58,.72) 55%, rgba(255,92,35,.14) 88%, transparent);
  box-shadow:0 0 2px rgba(255,190,90,.55);
}
.observer-firework-v180 .fw170-spark {
  position:absolute;
  left:50%; top:50%;
  width:var(--s); height:var(--s);
  border-radius:50%;
  background:#fff2bf;
  box-shadow:0 0 3px rgba(255,170,70,.8);
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--r) * -1));
  transform-origin:center;
}

/* Ver.1.7.0-dev.2 firework types */
.observer-firework-v180 .fw170-ray-botan{height:calc(var(--l)*.82);background:linear-gradient(to bottom,rgba(255,255,244,.98),rgba(255,207,112,.9) 20%,rgba(255,125,48,.55) 64%,transparent 94%)}
.observer-firework-v180 .fw170-ray-kamuro{background:linear-gradient(to bottom,rgba(255,250,210,.98),rgba(255,205,95,.88) 24%,rgba(240,153,55,.6) 62%,rgba(215,105,35,.16) 92%,transparent)}
.observer-firework-v180 .fw170-spark-kamuro{opacity:.45}
.observer-firework-v180 .fw170-glow.fw170-botan{opacity:.55;transform:scale(.88)}
.observer-firework-v180 .fw170-glow.fw170-kamuro{opacity:.42}
.observer-firework-v180 .fw170-glow.fw170-senrin{opacity:.24}
.observer-firework-v180 .fw170-mini{position:absolute;width:16%;height:16%;transform:translate(-50%,-50%)}
.observer-firework-v180 .fw170-mini-ray{position:absolute;left:50%;top:50%;width:.7px;height:48%;transform-origin:50% 0%;transform:rotate(var(--a));background:linear-gradient(to bottom,rgba(255,255,225,.96),rgba(255,178,70,.72),transparent);box-shadow:0 0 1px rgba(255,180,75,.5)}

/* Ver.1.7.0-dev.3: multiple blooms / fan starmine */
.observer-firework-v180 .fw170-placement{
  position:absolute; width:100%; height:100%;
  transform:translate(-50%,-50%);
  overflow:visible;
}
.observer-firework-v180 .fw170-bloom{
  position:absolute; inset:0;
  transform:scale(var(--bscale));
  transform-origin:50% 50%;
}
.observer-firework-v180 .fw170-bloom .fw170-glow,
.observer-firework-v180 .fw170-bloom .fw170-core,
.observer-firework-v180 .fw170-bloom .fw170-ray,
.observer-firework-v180 .fw170-bloom .fw170-spark,
.observer-firework-v180 .fw170-bloom .fw170-mini{
  position:absolute;
}



.observer-firework-v180{aspect-ratio:1/1;border-radius:50%;background:transparent!important;filter:none!important;}
.observer-firework-number-v180{position:absolute;left:50%;top:-18px;transform:translateX(-50%);min-width:18px;height:18px;padding:0 4px;border-radius:9px;display:grid;place-items:center;background:#e53935;border:1px solid #fff;color:#fff;font:700 10px/1 sans-serif;box-sizing:border-box;z-index:5;box-shadow:0 1px 4px rgba(0,0,0,.55);}
/* =========================================
   Ver.1.7.0-dev.10 REAL-CAMERA LINKED 3D
========================================= */
#terrain3DViewfinder {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10008;
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.55);
  pointer-events: none;
  display: none;
  min-width: 150px; min-height: 110px;
}
#terrain3DModal.active #terrain3DViewfinder { display:block; }
#terrain3DViewfinder::before, #terrain3DViewfinder::after {
  content:""; position:absolute; background:rgba(255,255,255,.42);
}
#terrain3DViewfinder::before { left:50%; top:0; bottom:0; width:1px; }
#terrain3DViewfinder::after { top:50%; left:0; right:0; height:1px; }
#terrain3DViewfinder i::before, #terrain3DViewfinder i::after {
  content:""; position:absolute; opacity:.35;
}
#terrain3DViewfinder i::before { left:33.333%; top:0; bottom:0; border-left:1px dashed #fff; box-shadow: calc(var(--dummy, 1) * 0px) 0 0 transparent; }
#terrain3DCameraHud {
  position: fixed; left:50%; bottom:48px; transform:translateX(-50%);
  z-index:10010; padding:8px 12px; border-radius:8px;
  background:rgba(7,10,14,.82); color:#fff; border:1px solid rgba(255,255,255,.22);
  font-size:12px; line-height:1.55; text-align:center; pointer-events:none;
  min-width:360px; max-width:calc(100vw - 40px);
}
.terrain3DBloomV1710 {
  --bloom-size: 48px;
  width:var(--bloom-size); height:var(--bloom-size); border-radius:50%;
  border:1px solid rgba(255,193,7,.72); background:transparent;
  box-shadow:0 0 4px rgba(255,193,7,.28);
  position:relative; pointer-events:none;
}
.terrain3DBloomV1710 span { position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.8); left:50%; top:50%; transform:translate(-50%,-50%); }
.terrain3DBloomV1710 em { display:none; }
@media (max-width:700px){ #terrain3DCameraHud{min-width:0;width:calc(100vw - 28px);font-size:10px;bottom:42px;} }

.location-status{margin:-2px 0 10px;font-size:11px;line-height:1.4;opacity:.72}
.location-status[data-state="warning"],.location-status[data-state="error"]{opacity:.95}
#currentLocationButton:disabled{opacity:.62;cursor:wait}
#terrain3DMapContainer{position:relative}
.terrain3d-aerial-toggle{position:absolute;z-index:8;top:10px;left:10px;width:auto;min-width:108px;padding:8px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.32);background:rgba(18,22,27,.82);color:#fff;font-size:12px;font-weight:700;backdrop-filter:blur(5px);cursor:pointer}
.terrain3d-aerial-toggle.active{background:rgba(25,118,210,.88)}


/* dev.36 public data credits */
.terrain3d-credits {
  position: absolute;
  z-index: 8;
  left: 10px;
  bottom: 10px;
  max-width: min(520px, calc(100% - 20px));
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 8px;
  background: rgba(10,14,18,.76);
  color: rgba(255,255,255,.92);
  font-size: 10px;
  line-height: 1.45;
  backdrop-filter: blur(5px);
  pointer-events: auto;
}
.terrain3d-credits strong { font-size: 10.5px; }
.terrain3d-credit-thirdparty,
.terrain3d-credit-grus { opacity: .82; }
.terrain3d-credit-links { margin-top: 2px; }
.terrain3d-credit-links a {
  color: #bbdefb;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 700px) {
  .terrain3d-credits {
    font-size: 9px;
    max-width: calc(100% - 20px);
    padding: 6px 8px;
  }
}

.ar-mode-modal{display:none;position:fixed;inset:0;z-index:10000;background:#000}.ar-mode-modal.active{display:block}body.ar-mode-active{overflow:hidden}.ar-camera-video,.ar-overlay-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ar-overlay-canvas{z-index:2;pointer-events:none}.ar-topbar,.ar-info-panel,.ar-calibration-panel{position:absolute;z-index:4;color:#fff;background:rgba(0,0,0,.58);border-radius:10px;padding:10px}.ar-topbar{top:10px;left:10px;right:10px;display:flex;gap:10px}.ar-info-panel{top:70px;left:10px;font-size:12px}.ar-calibration-panel{bottom:12px;left:10px;right:10px;display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center}.ar-calibration-panel button,.ar-topbar button{width:auto;margin:0}.ar-reticle{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:34px}@media(max-width:700px){.ar-calibration-panel{grid-template-columns:1fr 1fr}.ar-calibration-panel label,.ar-calibration-panel input{grid-column:1/-1}}

/* ========================================
   Ver.1.8.0-dev.1 複数打上地点・基礎UI
======================================== */
.multi-firework-panel{margin:10px 0 14px;padding:10px;border:1px solid #3a3d46;border-radius:8px;background:rgba(20,22,28,.72)}
.multi-firework-title{font-weight:700;margin-bottom:8px;font-size:13px}
.multi-firework-list{display:flex;flex-direction:column;gap:6px;max-height:150px;overflow:auto}
.multi-firework-empty,.multi-firework-note{font-size:11px;color:#aeb4c0;line-height:1.45}
.multi-firework-row{display:grid;grid-template-columns:28px 1fr auto;gap:6px;align-items:center;padding:6px 7px;border:1px solid #444a56;border-radius:6px;background:#191c23;color:#fff;cursor:pointer}
.multi-firework-row.active{border-color:#ff7043;background:#30201c}
.multi-firework-index{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e53935;color:#fff;font-weight:700;font-size:12px}
.multi-firework-coord{font-size:10px;color:#aeb4c0}
.multi-firework-current{font-size:10px;color:#ffab91}
.multi-firework-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.multi-firework-actions button{margin:0;padding:8px 5px;font-size:11px}
.multi-firework-note{margin-top:7px}

/* Ver.1.8.0-dev.9 regular multi-launch layout */
.regular-layout-panel{margin-top:10px;padding-top:8px;border-top:1px solid #343945}
.regular-layout-panel summary{cursor:pointer;font-size:12px;font-weight:800;color:#e7eaf0;user-select:none}
.regular-layout-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.regular-layout-grid label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px;font-size:10px;color:#b9c0cc}
.regular-layout-grid input,.regular-layout-grid select{min-width:0;width:100%;box-sizing:border-box;padding:6px;border:1px solid #4b5260;border-radius:5px;background:#11151c;color:#fff;font-size:11px}
.regular-layout-grid label:last-child{grid-column:1/-1;grid-template-columns:52px 1fr}
.regular-layout-apply{width:100%;margin-top:8px!important;padding:8px 6px!important;font-size:11px!important}


/* Ver.1.8.0-dev12: 花火群フィット推奨焦点距離 */
.recommended-focal-panel-v182 {
  margin: 8px 0 12px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px; background: rgba(255,255,255,.055);
}
.recommended-focal-title-v182 { font-size: 12px; font-weight: 700; margin-bottom: 7px; }
.recommended-focal-value-v182 { display:flex; align-items:center; gap:8px; }
#recommendedFocalValueV182 { font-size: 18px; font-weight: 800; color: #ffd54f; min-width: 78px; }
#applyRecommendedFocalV182 { flex:1; min-height:32px; cursor:pointer; }
#applyRecommendedFocalV182:disabled { opacity:.45; cursor:default; }
.recommended-focal-detail-v182 { margin-top:6px; font-size:10px; line-height:1.45; opacity:.72; }