/*! やじるし | (c) 2025-2026 asamizu | yajirushi.liteside.dev | All rights reserved */
/*
   許可をお願いするモーダル2つ（位置情報・端末の向き）。
   開いているかどうかは updateUI() が持つ状態で決まる。ここでは初期値の
   display: none だけを与え、以後の切り替えはJSに任せる。
   重なりの順は css/index.css の #menuOverlay のコメント参照（.modal は最前面の1200）。
*/

/*
   位置は inset で決める。width/height の 100% だと、iOS Safari のように
   ツールバーの出入りで表示領域が変わる環境で、寸法が確定するまで
   中身が寄って見えることがある（開いた直後だけ右下に出る、など）
*/
.modal {
  display: none;
  position: fixed;
  inset: 0;
  padding: 16px; /* 小さい画面で端に貼り付かないように */
  /* 中身が高いときは「パネルの中」ではなく、この覆いごとスクロールさせる。
     パネル側に max-height を持たせると、その高さを基準に中央を計算することになり、
     dvh のように後から変わる単位だと位置が落ち着かない */
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1200;
}

.modal-content {
  /* 中身が覆いより高いときも上が切れないよう、中央寄せは margin で行う
     （flex の align-items だけだとはみ出した分の上側が掴めなくなる） */
  margin: auto;
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  max-width: 80%;
}

.modal-content p {
  margin: 0 0 20px;
}

.modal-content button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  cursor: pointer;
}

.modal-content button:hover {
  background-color: #0056b3;
}

.modal-content button + button {
  margin-left: 10px;
}