:root {
  --bg-1: #1a2a1c;
  --bg-2: #0d1a0f;
  --panel: #18261a;
  --line: #3d5a41;
  --line-soft: #2a3f2d;
  --text: #eef3ee;
  --text-2: #9db3a0;
  --knob: #f2f5f2;
  --danger: #e2483c;
  --good: #4ade5f;
  --accent: #f0a842;
  --tap: 44px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    repeating-linear-gradient(115deg, #ffffff05 0 2px, transparent 2px 7px),
    radial-gradient(120% 100% at 30% 0%, var(--bg-1), var(--bg-2));
  color: var(--text);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Hiragino Sans",
        "Noto Sans JP", sans-serif;

  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}


.chips {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           4px max(12px, env(safe-area-inset-left));
  flex-wrap: wrap;
}
.spacer { flex: 1; }

/* 操縦画面の chip は映像の上に重なるため、背景を濃色の半透明にして
   明るい映像の上でも読めるようにする(全停止だけは不透明の赤を保つ)。 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
button.chip { font: inherit; font-size: 13px; font-weight: 600; }
button.chip:active { background: #ffffff18; }

.chip .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text-2);
}
.chip.linked .dot { background: var(--good); box-shadow: 0 0 8px var(--good); }
.chip.armed { border-color: var(--good); color: var(--good); }

.chip.actionable { border-color: var(--good); color: var(--good); }
.chip.stopped { border-color: var(--danger); color: var(--danger); }

.chip.danger {
  border-color: #ff6b5f;
  color: #fff;
  background: #c8382d;            /* 安全上重要。半透明にしない */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  min-height: 40px;
  padding: 5px 20px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.chip.danger:active { background: #a92c22; }
.chip.icon { padding: 5px 12px; font-size: 17px; min-width: var(--tap); justify-content: center; }


/* ── 操縦画面のレイヤー構成(FPS ゲームの HUD と同じ考え方) ──────────
   #drive がビューポート全体(100dvh)。子はすべて position:absolute で重ねる。
     Layer 1  .video-pane  z:0   ライブ映像。画面全体を使い 16:9 を保って収める
     Layer 2  .pads        z:10  半透明の操縦 UI(左下=前後 / 下中央=スライダー / 右下=左右)
     Layer 3  .chips       z:20  接続状態・操作権・全停止・設定(上部)
   isolation:isolate で #drive を独立したスタッキングコンテキストにし、
   外側(設定シート z:40、横向き案内 z:50)との前後関係を固定する。
   注意: 通常フロー(flex)で映像と UI を並べると、映像の固有サイズ(1920×1080)が
   UI を画面外へ押し出す。映像は必ず absolute の背景レイヤーにすること。 */
#drive {
  position: relative;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

/* Layer 1: 映像。引き伸ばさない・切らない(contain)。余白は黒で埋める。 */
.video-pane {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000;
}
.video-pane video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #000;
}

/* Layer 3: 上部ステータスバー */
.chips {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

/* Layer 2: 操縦 UI。下端に寄せ、3 列(左・中央・右)を下揃えで並べる。
   コンテナ自体は pointer-events:none にして、UI の隙間から映像へ
   タッチが抜けるようにする(子要素は auto に戻す)。 */
.pads {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 0 max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom))
           max(12px, env(safe-area-inset-left));
  pointer-events: none;
}
.pads > * { pointer-events: auto; }

.pad-col {
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 8px; min-height: 0;
}
.pad-label {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.center-col {
  display: flex; flex-direction: column; gap: 10px;
  align-items: center;
  min-width: 0;
  /* 首振り(パン)は小さめに。中央下に控えめに置く。 */
  width: min(100%, 240px);
  justify-self: center;
}
/* 首振りスライダー自体も低く小さく */
#aux-bars .aux { padding: 5px 12px 2px; }
#aux-bars .aux input[type="range"] { height: 30px; }


.knob {
  position: absolute;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
              rgba(255, 255, 255, 0.95), rgba(214, 220, 214, 0.88) 62%, rgba(170, 180, 172, 0.85));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.65), inset 0 -3px 6px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.edge {
  position: absolute;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}


/* 前後(vpad)と左右(hpad)を同じ寸法にする:
   太さ(vpadの幅=hpadの高さ)も長さ(vpadの高さ=hpadの幅)も
   同じ --pad-length を使うことで、向きが違っても同じ大きさに見える。
   固定サイズにしたことで、両方とも列の中で上下・左右中央に来る。 */
:root {
  --pad-thickness: clamp(96px, 26dvh, 150px);
  --pad-length: clamp(180px, 42dvh, 340px);
}

/* 前後・左右のパッドは映像の上に重なるため、外周を濃色の半透明+薄い白枠にする
   (ゲームのバーチャルパッドの見え方)。映像を隠しすぎないよう背景は濃くしすぎない。 */
.vpad {
  position: relative;
  width: var(--pad-thickness);
  height: var(--pad-length);
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.vpad .rail {
  position: absolute;
  top: 40px; bottom: 40px; left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.35);
}
.vpad .edge.top { top: 12px; left: 0; right: 0; text-align: center; }
.vpad .edge.bottom { bottom: 12px; left: 0; right: 0; text-align: center; }
.vpad .knob { left: 50%; margin-left: -31px; margin-top: -31px; }


.hpad {
  position: relative;
  width: var(--pad-length);
  height: var(--pad-thickness);
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.hpad .rail {
  position: absolute;
  left: 40px; right: 40px; top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgba(255, 255, 255, 0.35);
}
.hpad .edge.left { left: 14px; top: 50%; margin-top: -8px; }
.hpad .edge.right { right: 14px; top: 50%; margin-top: -8px; }
.hpad .knob { top: 50%; margin-top: -31px; margin-left: -31px; }


.vpad.locked, .hpad.locked { opacity: 0.35; pointer-events: none; }


/* 首振り・上下のスライダー(映像の上に重なる操作パネル) */
.aux {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 8px 14px 4px;
}
.aux + .aux { margin-top: 8px; }
.aux .head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.aux output { font-variant-numeric: tabular-nums; letter-spacing: 0; }
#aux-bars input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.35);
}

/* ── 上下(CH4 チルト)= 画面右端の縦バー(DJI 機体アプリ風) ──────────
   .pads とは別に #drive 直下へ絶対配置する。右端・縦中央寄り(上部)に置き、
   右下の左右パッドと重ならない高さにする。 */
.tilt-col {
  position: absolute;
  z-index: 10;
  right: max(10px, env(safe-area-inset-right));
  top: calc(max(8px, env(safe-area-inset-top)) + 52px);
  height: min(var(--pad-length), 46dvh);
  width: 54px;
  pointer-events: none;   /* 子(スライダー本体)だけ触れる */
}
.tilt-col > * { pointer-events: auto; }

.aux-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  width: 100%;
  padding: 8px 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.aux-vertical .head {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
}
/* 縦スライダー本体。iOS/Safari は writing-mode(標準)と slider-vertical(旧webkit)の
   どちらか一方だけを解釈するため、両方書いて版差を吸収する。上=正(上を向く)。 */
.aux-vertical input[type="range"] {
  -webkit-appearance: slider-vertical;   /* 旧 Safari/iOS */
  writing-mode: vertical-lr;             /* 標準(Safari 17.4+/Chrome 121+) */
  direction: rtl;                        /* writing-mode 時に 上=max にする */
  width: 34px;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.aux-vertical input[type="range"]::-webkit-slider-runnable-track {
  width: 4px; height: 100%;
  background: rgba(255, 255, 255, 0.35);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 38px;
  background: none;
  margin: 0;
  touch-action: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--line-soft);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -13px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, #cfd6cf 62%, #aab3ab);
  box-shadow: 0 4px 10px #0009;
}
input[type="range"]:disabled::-webkit-slider-thumb { background: #6b7a6d; box-shadow: none; }

#notice {
  margin: 0; font-size: 12px; color: var(--accent); min-height: 1.2em; text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
#notice:empty { display: none; }


.rotate {
  display: none;
  position: fixed;
  inset: 0;
  margin: 0;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  font-size: 17px;
  letter-spacing: 0.1em;
  z-index: 50;
}
@media (orientation: portrait) and (max-height: 900px) {
  .rotate { display: flex; }
}


.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  background: var(--bg-2);
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.sheet-inner { max-width: 420px; margin: 0 auto; }
.sheet-inner.wide { max-width: 560px; }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; }

.sheet h1 { font-size: 24px; margin: 8px 0 4px; letter-spacing: 0.04em; }
.sheet h2 { font-size: 19px; margin: 0; }
.sheet h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--text-2); margin: 22px 0 8px; text-transform: uppercase;
}
.hint { color: var(--text-2); font-size: 14px; }
.hint.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.problem {
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--danger); border-radius: 10px;
  background: #e2483c22; color: #ffb4ae;
  font-size: 13px; white-space: pre-line; word-break: break-all;
}

.fingerprint {
  font: 700 44px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 10px;
  text-align: center;
  margin: 20px 0 8px;
  color: var(--good);
}

#pair-code {
  width: 100%; min-height: 52px; margin-top: 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #ffffff08; color: var(--text);
  font: inherit; font-size: 24px; letter-spacing: 6px;
  text-align: center; text-transform: uppercase;
}
#pair-code::placeholder { letter-spacing: 0; color: var(--text-2); }
#pair-code:focus { outline: none; border-color: var(--good); }

button.primary {
  width: 100%; min-height: var(--tap); margin-top: 12px;
  border: none; border-radius: 12px;
  background: var(--good); color: #06210b;
  font: inherit; font-size: 16px; font-weight: 700;
}
button.primary:disabled { background: #46584a; color: #8ea192; }
button.link {
  border: none; background: none; color: var(--good);
  font: inherit; font-size: 14px; padding: 10px 0;
}


.list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #ffffff06; }
.row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 10px 14px;
  border: none; background: none; color: var(--text); font: inherit; text-align: left;
}
.list > * + * { border-top: 1px solid var(--line-soft); }
.row:active:not(:disabled) { background: #ffffff10; }
.row .title { flex: 1; min-width: 0; }
.row .subtitle { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.row.danger { color: #ff9a91; justify-content: center; font-weight: 700; }
.row:disabled { color: #6b7a6d; }
.row.selected .title { font-weight: 700; }
.row .slider { flex: 1; }


.switch {
  position: relative; flex: 0 0 auto;
  width: 51px; height: 31px; border-radius: 31px;
  background: #ffffff20; border: none; padding: 0;
  transition: background 0.2s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px #0007;
  transition: transform 0.2s;
}
.switch[aria-checked="true"] { background: var(--good); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch:disabled { opacity: 0.45; }


dialog {
  border: none; border-radius: 14px; padding: 20px 16px 0;
  width: min(300px, calc(100vw - 60px));
  background: var(--panel); color: var(--text); text-align: center;
}
dialog::backdrop { background: #000a; }
dialog h2 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
dialog p { margin: 0 0 16px; font-size: 13px; color: var(--text-2); }
.dialog-actions { display: flex; margin: 0 -16px; border-top: 1px solid var(--line-soft); }
.dialog-actions button {
  flex: 1; min-height: var(--tap); border: none; background: none;
  color: var(--good); font: inherit; font-size: 16px;
}
.dialog-actions button + button { border-left: 1px solid var(--line-soft); }
.dialog-actions button.default { font-weight: 700; }
.dialog-actions button:active { background: #ffffff12; }