/* ScrambleDeck オプション（左上のオプションボタン＋その中身）の共通スタイル。

   対戦画面とそれ以外（トップ・チュートリアル一覧・デッキ構築・ドラフト）で、
   ボタンの見た目と中身の部品（音量・言語切り替え）を共有する。違うのは2点だけ：
   - 一覧の中身：対戦は 戻る/降参/UIラベル/伏せ確認/音量、それ以外は 音量/言語 のみ
   - 一覧の開き方：対戦は fixed のコンテナ内にそのまま縦積み（下に何も無いので押し出しが起きない）、
     それ以外は .option-controls を基準にした絶対配置で重ねる（上部バーの高さを増やさないため）
   置き場所（左上のどこか）は各画面のCSSが決める。ここは中身の見た目だけを持つ。 */

/* オプションボタン：これ単体だけ常に見えており、押すと下に.option-menuの一覧を開閉する。 */
.option-menu-btn {
  width: clamp(28px, 3.2vw, 40px);
  height: clamp(28px, 3.2vw, 40px);
  padding: clamp(4px, 0.6vw, 7px);
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.option-menu-btn:hover { background: rgba(0, 0, 0, 0.75); }
.option-menu-btn img { width: 100%; height: 100%; object-fit: contain; }

/* オプション一覧：中身を縦に並べる。開閉のみここで担当し、
   中身の各要素(home-link/label-toggle-btn/volume-control/lang-switch)の見た目・挙動は各自が持つ。 */
.option-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.option-menu.hidden { display: none; }

/* ── 対戦以外の画面の簡易オプション（js/optionmenu.js が組み立てる）──────────
   ボタンを基準に一覧を絶対配置で重ねる。上部バー(.deck-topbar)の中に置いても
   バーの高さが変わらず、トップ画面では下のメニューを押し下げない。 */
.option-controls {
  position: relative;
  flex: none;                    /* 上部バーの中で潰されない */
  z-index: 30;
  line-height: 0;                /* ボタン画像の下に隙間を作らない */
}
.option-controls .option-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  padding: clamp(6px, 1vh, 10px);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.72);
  line-height: normal;
}

/* ── 音量調節 ─────────────────────────────────────────────────────
   ボタンでスライダーパネルの表示/非表示を切り替える。パネルはボタンの右隣に開く。 */
.volume-control {
  display: flex;
  /* 上端揃え。centerだとボタンより背の高いパネルを開いた時に、ボタンが縦中央へ下がって位置がずれる。 */
  align-items: flex-start;
  gap: clamp(6px, 1vw, 10px);
}
.volume-btn {
  width: clamp(28px, 3.2vw, 40px);
  height: clamp(28px, 3.2vw, 40px);
  padding: clamp(4px, 0.6vw, 7px);
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
/* 対人戦のゲスト側は音を鳴らさない（ホストのタブが鳴らす）ため、音量ボタンごと消す。sound.jsのinitVolumeControl参照。 */
.volume-btn.hidden { display: none; }
.volume-btn:hover { background: rgba(0, 0, 0, 0.75); }
.volume-btn img { width: 100%; height: 100%; object-fit: contain; }
/* 全体/BGM/SEの3本を縦に積むパネル。ボタンの右隣に開き、盤面へは重ならない位置に収まる。 */
.volume-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.6vh, 6px);
  padding: clamp(4px, 0.8vh, 8px) clamp(6px, 0.8vw, 10px);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
}
.volume-panel.hidden { display: none; }
.volume-row {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.6vw, 8px);
  cursor: pointer;
}
/* ラベル幅を揃えて、3本のスライダーの左端を縦に一直線にする。 */
.volume-label {
  width: 3.2em;
  color: #ffffff;
  font-size: clamp(10px, 1.1vw, 13px);
}
.volume-slider {
  width: clamp(80px, 10vw, 140px);
}

/* ── 言語切り替え（日本語 / EN の2択セグメント）─────────────────────────
   ON/OFFのトグルではなく2つ並べた選択肢にする：今どちらなのかが、押す前に一目で分かる
   （英語表示中に日本語しか読めない人が迷わないよう、どちらの札も常に出しておく）。
   選択中の側は明るく塗り、押しても何も起きない。切り替えはjs/i18n.jsが担当。 */
.lang-switch {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  overflow: hidden;
}
.lang-switch-btn {
  padding: 6px 12px;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: var(--text-light, #ffffff);
  font-size: clamp(12px, 1.4vw, 16px);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.lang-switch-btn:hover { background: rgba(0, 0, 0, 0.75); }
/* 選択中。押しても何も起きないのでカーソルも既定へ戻す。 */
.lang-switch-btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.85);
  color: #1a1a1a;
  cursor: default;
}

/* 小さい画面・低い画面では各パーツを縮める（位置は親のgapで自動的に詰まる）。 */
@media (max-width: 800px), (max-height: 500px) {
  .option-menu-btn { width: 22px; height: 22px; padding: 3px; }
  .option-menu { gap: 5px; }
  .volume-btn { width: 22px; height: 22px; padding: 3px; }
  .volume-slider { width: 60px; }
  .volume-label { font-size: 9px; }
  .lang-switch-btn { padding: 3px 8px; font-size: 10px; }
}