/* ScrambleDeck 複数画面共通スタイル。 */

/* フォームコントロールはCSSを継承せずブラウザ既定の書体になる（HTML標準の挙動）。
   放置するとボタン・入力欄だけが本文と違う書体になり、ピクセル風フォントでは特に目立つため、
   まとめて本文の書体(body → --game-font)を継承させる。
   ※このファイルを読まない top.css 側にも同じ規則を置いてある。 */
button, input, select, textarea { font-family: inherit; }

/* ── 矢印アイコン ───────────────────────────────────────────────────
   ページ送り・並べ替え・戻る等の矢印は、以前は ◀▶▲▼‹› といった文字で描いていた。
   これらの字形と字幅は端末のフォントに依存する（PCとタブレットで形・大きさが変わる、
   環境によっては豆腐や絵文字調になる）ため、全画面で1枚の画像に統一する。

   素材(page-up-down001.png)は右向きの三角1枚だけなので、向きは回転で作る（既定=右）。
   色は mask で currentColor を敷いて出すので、置いた場所の文字色にそのまま従う
   （画像素材は白固定なので、background-image だと暗い背景の画面でしか使えない）。
   大きさは 1em ＝ 置いた要素のfont-size基準。個別に変えたい場所は font-size か
   width/height を上書きする。 */
.arrow-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask: url("../../public/images/UI/page-up-down001.png") center / contain no-repeat;
  mask: url("../../public/images/UI/page-up-down001.png") center / contain no-repeat;
}
.arrow-icon.right { transform: none; } /* 既定と同じ。向きを明示したい呼び出し側のために置く */
.arrow-icon.left { transform: rotate(180deg); }
.arrow-icon.up { transform: rotate(-90deg); }
.arrow-icon.down { transform: rotate(90deg); }

/* ── モバイル対応：縦画面では回転案内のみ表示し、横並びレイアウト前提の画面(対戦・デッキ構築)は
   横画面(landscape)専用にする ─────────────────────────────────────────
   スマホは横に持った時だけプレイ可能とする方針（[[responsive-layout-goal]]の対象は横画面のみ）。
   この案内を出したい画面のbody直下に <div class="rotate-prompt">〜</div> を置く。 */
.rotate-prompt { display: none; }
@media (orientation: portrait) {
  .rotate-prompt {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    background: #111;
    color: #fff;
    text-align: center;
    font-size: clamp(16px, 5vw, 22px);
    font-weight: bold;
  }
  /* 回転案内以外の全要素（盤面・手札・オーバーレイ類）を隠す。 */
  body > *:not(.rotate-prompt) { display: none !important; }
}