/* 端末のノッチ・ホームバーを避ける余白 (セーフエリア)。
   LINEミニアプリ審査の確認項目:
   https://developers.line.biz/ja/docs/line-mini-app/design/landscape/

   ガイドラインが求めるのは横向き (ランドスケープ) のときの
   「左右 44px・下 21px」。実機のノッチ形状に合わせられるよう
   env(safe-area-inset-*) と max() を組み合わせる。

   縦向きでは既存の各 CSS が env(safe-area-inset-bottom) を個別に見ているので、
   ここでは横向きだけを面倒みる (二重に余白が付かないように)。

   前提: <meta name="viewport" ... viewport-fit=cover>。
   これが無いと iOS は env(safe-area-inset-*) を常に 0 で返す。 */

@media screen and (orientation: landscape) {
    /* 画面いっぱいに敷いている土台に余白を入れる。
       body ではなく中身側に入れるのは、背景色・背景画像を
       画面の端まで出したまま、中身だけを内側へ寄せるため。 */
    #wrap,
    #contents,
    .uiScreen,
    .spWrap {
        padding-right: max(44px, env(safe-area-inset-right, 0px));
        padding-bottom: max(21px, env(safe-area-inset-bottom, 0px));
        padding-left: max(44px, env(safe-area-inset-left, 0px));
        box-sizing: border-box;
    }

    /* 画面に貼り付けている要素 (下部ナビ・固定のボタン行・モーダルの下枠) は
       余白ではなく位置そのものをずらす。padding だと中身だけ寄って
       背景の帯がノッチに残ってしまう。 */
    .globalNav,
    .bottomNav,
    .uiModalActions,
    .spPurse {
        padding-right: max(44px, env(safe-area-inset-right, 0px));
        padding-left: max(44px, env(safe-area-inset-left, 0px));
        padding-bottom: max(21px, env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    /* 全画面のオーバーレイ (農園の結果・ガチャ演出など) も同じだけ内側へ。 */
    .stageOverlay__inner,
    .uiCoinCard,
    .uiModalCard {
        margin-right: max(44px, env(safe-area-inset-right, 0px));
        margin-left: max(44px, env(safe-area-inset-left, 0px));
        margin-bottom: max(21px, env(safe-area-inset-bottom, 0px));
    }
}