/* 統合モバイル対応CSS - クリーン版 */
/* ===========================================
   基本設定
   =========================================== */

/* CSS変数の定義 */
:root {
    --vh: 1vh;
    --actual-vh: 100vh;
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --space-bg-start: #1B2735;
    --space-bg-end: #090A0F;
}

/* ===========================================
   デスクトップ（変更なし）
   =========================================== */
@media (min-width: 769px) {

    html,
    body {
        height: auto;
        overflow: visible;
    }
}

@media (min-width: 769px) {
    body:not(.page-ranking):not(.has-stars):not(.page-home):not(.page-search) {
        background: #F5F6F8;
    }

    body.page-home,
    body.page-search {
        background: radial-gradient(ellipse at bottom, var(--space-bg-start) 0%, var(--space-bg-end) 100%);
        background-color: var(--space-bg-end);
        color: rgba(255, 255, 255, 0.95);
    }

    html:has(body.page-home),
    html:has(body.page-search) {
        background: radial-gradient(ellipse at bottom, var(--space-bg-start) 0%, var(--space-bg-end) 100%);
        background-color: var(--space-bg-end);
        min-height: 100%;
    }
}

/* ===========================================
   モバイル専用スタイル
   =========================================== */
@media (max-width: 768px) {

    /* 最小限の余白設定 */
    .pagination {
        margin-bottom: 20px !important;
    }

    .pagination-container {
        margin-bottom: 60px !important;
        /* 余白を削減 */
    }

    /* HTML要素 */
    html {
        height: 100vh;
        height: 100dvh;
        /* 動的viewport高さ */
        height: -webkit-fill-available;
        /* iOS Safari対応 */
        min-height: 100vh;
        min-height: 100dvh;
        min-height: -webkit-fill-available;

        /* スクロール設定 */
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        /* オーバースクロール防止（アドレスバー対策） */
        overscroll-behavior: none;
        -webkit-overscroll-behavior: none;

        /* 宇宙背景 */
        background: radial-gradient(ellipse at bottom, var(--space-bg-start) 0%, var(--space-bg-end) 100%);
        background-color: var(--space-bg-end);
        background-attachment: scroll;
        /* iOS Safariでは scroll を使用 */
        background-size: cover;

        /* iOS Safari特有の設定 */
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;

        /* マージン・パディングリセット */
        margin: 0;
        padding: 0;
    }

    /* Body要素 */
    body {
        height: 100vh;
        height: 100dvh;
        height: -webkit-fill-available;
        min-height: 100vh;
        min-height: 100dvh;
        min-height: -webkit-fill-available;

        /* スクロール設定 */
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        /* オーバースクロール防止 */
        overscroll-behavior: none;
        -webkit-overscroll-behavior: none;

        /* 宇宙背景 */
        background: radial-gradient(ellipse at bottom, var(--space-bg-start) 0%, var(--space-bg-end) 100%);
        background-color: var(--space-bg-end);
        background-attachment: scroll;
        background-size: cover;

        /* マージン・パディングリセット */
        margin: 0;
        padding: 0;

        /* 位置設定 */
        position: relative;
    }

    /* メインコンテナ */
    .container {
        min-height: 100vh;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        padding-bottom: 60px;
        /* gmenu分の余白を削減 */
        background: transparent;
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }

    /* メインコンテンツエリア */
    main {
        min-height: calc(100vh - 60px);
        min-height: calc(100dvh - 60px);
        padding-bottom: 10px;
        /* 余白を削減 */
        background: transparent;
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }

    /* コンテンツラップ */
    .contentsWrap {
        padding-bottom: 60px;
        /* 余白を削減 */
        background: transparent;
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }

    /* ページネーションとフッター */
    .pagination-container,
    footer {
        margin-bottom: 60px;
        background: transparent;
    }
}

/* ===========================================
   iOS Safari特有の調整
   =========================================== */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {

        html,
        body {
            height: -webkit-fill-available;
            min-height: -webkit-fill-available;
            background-attachment: scroll;
            /* iOSではfixedが効かない */
        }

        .container {
            min-height: -webkit-fill-available;
        }
    }
}

/* ===========================================
   動的viewport対応
   =========================================== */
@supports (height: 100dvh) {
    @media (max-width: 768px) {

        html,
        body {
            height: 100dvh;
            min-height: 100dvh;
        }

        .container {
            min-height: 100dvh;
        }

        main {
            min-height: calc(100dvh - 80px);
        }
    }
}

/* ===========================================
   gMenu安定化（点滅防止）
   =========================================== */
@media (max-width: 768px) {
    .gMenu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        z-index: 9999;
        animation: none;
        opacity: 1;
        visibility: visible;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        background: #000000 !important;
        -webkit-tap-highlight-color: transparent !important;
        /* will-change は JS で必要時のみ付与（静的設定はChromiumで初期フラッシュの原因になる） */
        will-change: auto;
        /* transitionはJS初期化後に gmenu-ready クラスで有効化 */
        transition: none;
    }

    /* JS初期化後にクラスが付与されてからtransitionを有効にする */
    .gmenu-ready .gMenu {
        transition: transform 0.22s ease !important;
    }

    .gMenu.scroll-hidden,
    body.gmenu-scroll-hidden .gMenu {
        transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px))) !important;
        -webkit-transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px))) !important;
    }
}

/* ===========================================
   横画面対応
   =========================================== */
@media (max-width: 768px) and (orientation: landscape) {

    html,
    body {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
    }

    .container {
        min-height: calc(var(--vh, 1vh) * 100);
    }

    .contentsWrap {
        padding-bottom: 60px;
    }
}

/* ===========================================
   星のコンテナ設定
   =========================================== */
@media (max-width: 768px) {
    .stars {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        overflow: hidden;
        pointer-events: none;
        background: transparent;
    }

    /* モバイルでは動的な星を無効化（パフォーマンス向上） */
    .star,
    .shooting-star {
        display: none;
    }
}

/* ===========================================
   パフォーマンス最適化
   =========================================== */
@media (max-width: 768px) {

    /* タップハイライトの制御 */
    * {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    }

    /* スクロールバーを隠す */
    ::-webkit-scrollbar {
        display: none;
        width: 0;
    }

    html {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    /* 高解像度ディスプレイ対応 */
    @media (-webkit-min-device-pixel-ratio: 2) {

        html,
        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    }
}

/* ===========================================
   アニメーション制限（パフォーマンス向上）
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    @media (max-width: 768px) {

        .stars:before,
        .stars:after,
        .star,
        .shooting-star {
            animation: none;
        }

        .shooting-star {
            display: none;
        }
    }
}