/* リズムゲームの設定。**入口・あそぶ・ランキング・曲の画面で共通。**
   どの画面でも「⚙ 設定」で、画面の上に重ねて開く。
   中身は templates/_settings.html、動きは settings.js。

   **大きさは画面から決める**（比率だけ）。縦持ちは高さ、横持ちは幅で決まり、
   どちらにも振り切れないように上下を挟む */

/* 設定を開くボタン。**右上の小さなボタン。** 遊ぶ人の目線から外す */
.gm-gear {
  padding: .45em .9em; border-radius: .6em; border: 1px solid #9aa6c8;
  background: rgba(255, 255, 255, .75); color: #4a5566; font-size: .85em; cursor: pointer;
}
/* 攻略サイトの土台の画面では、見出しの上の行の右端に置く */
.rh-gearrow { display: flex; justify-content: flex-end; margin: 0 0 .3em; }

/* ===== 設定の枠（画面に重ねる） ===== */
.gm-set {
  position: fixed; inset: 0; z-index: 60;
  display: flex; justify-content: center; align-items: flex-start;
  overflow-y: auto; padding: 3vh 2.5vw;
  background: rgba(20, 24, 44, .45);
  font-size: min(max(2vh, 1.4vw), 3vh);
  text-align: left;
}
.gm-set[hidden] { display: none; }
.gm-set-box {
  width: min(44em, 100%); display: flex; flex-direction: column; gap: .8em;
  padding: 1em 1.1em; border-radius: 1em; color: #2b3446;
  background: #fff8fc; box-shadow: 0 .4em 1.6em rgba(0, 0, 0, .25);
}
.gm-set h2 { margin: 0; text-align: center; font-size: 1.3em; color: #22293a; }
.gm-set p { margin: 0; line-height: 1.6; color: #2b3446; font-size: 1em; }
.gm-set label { display: inline-flex; align-items: center; gap: .35em; cursor: pointer; }
.gm-set input[type="radio"], .gm-set input[type="checkbox"] { width: 1.1em; height: 1.1em; margin: 0; }
.gm-set input[type="number"] {
  font-size: 1em; padding: .25em .4em; border-radius: .4em;
  border: 1px solid rgba(0, 0, 0, .2); background: #fff; color: #2b3446;
}
.gm-set .gm-sub { color: #6b7688; font-size: .85em; }
/* 読み込みの具合や、選べなかった理由の一行 */
.gm-set-note { min-height: 1.4em; text-align: center; font-size: .85em; color: #b0406e; }
.gm-set-done {
  align-self: center; padding: .5em 2.2em; border-radius: 2em; border: 0; cursor: pointer;
  background: #6f7fbf; color: #fff; font-size: 1em; font-weight: 700;
}

/* ===== 左のタブ（共通設定／曲別設定） =====
   **縦書き。** 横書きにすると左の列が広くなり、イメージ図が小さくなりすぎる */
.gm-set-body { display: flex; gap: .7em; align-items: stretch; }
.gm-side { display: flex; flex-direction: column; gap: .4em; flex: 0 0 auto; }
.gm-sidetab {
  writing-mode: vertical-rl; letter-spacing: .1em;
  padding: .8em .45em; border-radius: .6em; cursor: pointer; font-size: .9em;
  border: 1px solid rgba(90, 100, 130, .3); background: rgba(255, 255, 255, .7); color: #4a5566;
}
.gm-sidetab.on { background: #6f7fbf; border-color: #6f7fbf; color: #fff; font-weight: 700; }
.gm-sidepanes { flex: 1 1 auto; min-width: 0; }
.gm-sidepane[hidden] { display: none; }

/* ===== 上のタブ（項目） =====
   **押しているタブだけ色を付ける**（どれを見ているか分かるように） */
.gm-tabs { display: flex; gap: .4em; justify-content: center; flex-wrap: wrap;
  border-bottom: 1px solid rgba(90, 100, 130, .2); padding-bottom: .5em; }
.gm-tab {
  padding: .4em .8em; border-radius: 2em; cursor: pointer; font-size: .85em; white-space: nowrap;
  border: 1px solid rgba(90, 100, 130, .3); background: rgba(255, 255, 255, .7); color: #4a5566;
}
.gm-tab.on { background: #ff6fae; border-color: #ff6fae; color: #fff; font-weight: 700; }
.gm-tabpane { display: flex; flex-direction: column; align-items: center; gap: .6em;
  padding-top: .8em; min-height: 6em; }
.gm-tabpane[hidden] { display: none; }

/* ===== 画面表示（イメージ図つきの選択肢） =====
   **同じスマホを横に持った図と縦に持った図。** 図はどちらも 520×240 の向き違い。
   横長の図の幅＝縦長の図の高さ になるよう、縦長の図は短い辺の 520/240 倍の高さにする。
   **選択肢ごとに枠でくくる**（図は3枚でも、選べるのは2つ）。
   **左右でそろえる。** 上の段＝画像（下端）、下の段＝ラジオと文字（上端）。subgrid で並べる */
.gm-modes {
  /* 図の短い辺。横に3枚並べると幅は短い辺の約5.3倍＋余白 */
  --mh: min(13vh, 11vw);
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
  column-gap: 1em; row-gap: .4em; justify-content: center;
}
/* **縦持ちでは上下に並べる。** 横に3枚だと図が小さくなりすぎる */
@media (orientation: portrait) {
  .gm-modes { grid-template-columns: auto; --mh: min(11vh, 19vw); }
}
.gm-set label.gm-mode {
  display: grid; grid-row: span 2; grid-template-rows: subgrid;
  justify-items: center; row-gap: .4em; padding: .5em .6em;
  border: 2px solid rgba(90, 100, 130, .25); border-radius: .7em;
  background: rgba(255, 255, 255, .5);
}
.gm-set label.gm-mode:has(input:checked) { border-color: #ff6fae; background: rgba(255, 111, 174, .08); }
.gm-mode-imgs { display: flex; gap: .5em; align-items: flex-end; align-self: end; }
.gm-set .gm-mode > span:not(.gm-mode-imgs) { display: flex; align-items: flex-start; gap: .4em; align-self: start; }
.gm-set .gm-mode > span input[type="radio"] { margin-top: .25em; flex: none; }
.gm-mode img {
  height: var(--mh); width: auto; border-radius: .5em;
  /* 枠線は図の外に足す。内側に含めると、横長の図だけ枠のぶん縮んで大きさがそろわない */
  box-sizing: content-box;
  border: 3px solid transparent; box-shadow: 0 .15em .4em rgba(0, 0, 0, .25);
}
.gm-mode img.tall { height: calc(var(--mh) * 520 / 240); }
.gm-mode span span { text-align: left; line-height: 1.4; white-space: nowrap; }
.gm-mode:has(input:checked) img { border-color: #ff6fae; }