/* ==========================================================================
   MOBILE & RESPONSIVE STYLES - FINAL REFINEMENT
   ========================================================================== */

/* 950px以下のタブレット・中画面サイズ向け調整 */
@media (max-width: 950px) {
    /* モバイル・タブレットではHUD切替ボタンを非表示 */
    .hud-toggle-btn {
        display: none !important;
    }

    /* 全体的な文字溢れ・単語途中改行の防止 */
    * {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    /* プロフィールグリッドを縦並びに切り替え */
    .personnel-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* モバイル版ではプロフィール欄の全オブジェクト（写真・グラフ等）を非表示 */
    .personnel-photo-container {
        display: none !important;
    }

    /* 名前とローマ字の配置調整 */
    .data-header {
        display: block !important; /* 子要素がないためシンプルなブロック配置へ */
        border-bottom: 2px solid var(--color-primary) !important;
        padding-bottom: 1rem !important;
    }
    /* 名前とローマ字の配置調整：横並び（row）に変更 */
    .data-header h1 {
        font-size: 1.4rem !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 0.8rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        text-align: left !important;
    }
    .name-block {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        flex: 1;
        justify-content: flex-start !important;
    }
    .name-romaji {
        display: inline-block !important;
        font-size: 0.8rem !important;
        opacity: 0.7;
        white-space: nowrap !important;
    }
    /* ステータスバッジを非表示 */
    .status-badge {
        display: none !important;
    }

    /* モバイル用ミニ画像も削除 */
    .mobile-avatar-mini {
        display: none !important;
    }

    /* プロフィールテーブルの調整：見出しの折り返しを禁止 */
    .cyber-data-table th {
        width: auto !important;
        min-width: 100px !important;
        white-space: nowrap !important;
        padding: 0.8rem 0.4rem !important;
        font-size: 0.75rem !important;
    }
    .cyber-data-table td {
        padding: 0.8rem 0.4rem !important;
        font-size: 0.9rem !important;
    }
    .no-break {
        white-space: nowrap !important;
    }

    /* 機密マークを非表示 */
    .confidential-mark {
        display: none !important;
    }

    /* タイムラインログのレイアウト修正（学歴など） */
    .timeline-item {
        display: flex;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.2rem !important;
        margin-bottom: 0.8rem !important;
    }
    .timeline-label,
    .timeline-content {
        font-size: 0.9rem !important; /* td (0.9rem) と統一 */
    }
    .timeline-content {
        padding-left: 0.5rem;
        border-left: 1px solid var(--color-primary-dim);
    }

    /* リンクボタンのサイズ微調整 */
    .cyber-link-btn {
        padding: 0.4rem 1rem !important;
        font-size: 0.8rem !important;
    }
}

/* 768px以下の標準的なスマホ向け調整 */
@media (max-width: 768px) {
    .container {
        padding: 0 0.8rem !important;
    }

    /* モバイル版ではメール用のSFオブジェクトコンテナを非表示（空白を削除） */
    .contact-sub-module:nth-child(2) .sf-object-container {
        display: none !important;
    }

    .section {
        padding: 1.5rem 0 !important;
    }

    html {
        background-color: #000 !important; /* ステータスバー領域の色味を統一 */
    }

    body {
        height: 100vh !important;
        height: 100dvh !important; /* iOS Safari用：ツールバーを除いた正確な高さを確保 */
        background-color: transparent !important; /* 背景オブジェクトを見えるようにする */
    }

    /* ヘッダーの最適化：iPhoneのセーフエリア（ノッチ部分）を黒で埋める */
    .header {
        background-color: #000 !important;
        padding-top: calc(env(safe-area-inset-top) + 0.6rem) !important;
        padding-bottom: 0.6rem !important;
        box-shadow: 0 1px 10px rgba(0, 243, 255, 0.2) !important;
        border-bottom: 1px solid rgba(0, 243, 255, 0.4) !important;
    }

    /* ヘッダーリンクをバランス良く一行に集約 */
    .nav ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -ms-overflow-style: none;
        scrollbar-width: none;
        gap: 0.8rem !important; /* 隙間を詰めて収まりを良くする */
        width: 100% !important;
        padding: 0 0.5rem !important;
        justify-content: center !important; /* 中央揃えに変更 */
    }
    .nav ul::-webkit-scrollbar {
        display: none;
    }
    .nav a {
        font-size: 0.8rem !important; /* 0.7より大きく、0.85より小さいバランスに調整 */
        padding: 0.5rem 0.1rem !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap !important;
    }

    /* 背景装飾の最適化：中央のメインオブジェクトのみ表示 */
    #cyber-bg > div:not(:first-child) {
        display: none !important;
    }
    #cyber-bg > div:first-child {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0.8) !important; /* 少し大きく */
        width: 100vw !important;
        height: 100vw !important;
        max-width: 600px !important;
        max-height: 600px !important;
        opacity: 1 !important; /* 個別調整のため親は1に設定 */
    }

    /* リングと球体の視認性調整 */
    .hud-ring {
        opacity: 0.3 !important;
    }
    .sphere-container { 
        width: 320px !important; 
        height: 320px !important;
        opacity: 0.6 !important; /* 球体をはっきり表示 */
    }

    /* 遷移演出のレスポンシブ化：JSのアニメーションを妨げないよう調整 */
    .sf-window-inner {
        padding: 8px !important;
    }
    .sf-glitch-title {
        font-size: 0.9rem !important;
        margin-bottom: 6px !important;
    }
    .sf-window-body {
        padding: 0 10px !important;
    }

    /* 各ページヘッダー（遷移後ページ）の文字サイズ */
    .section-title {
        font-size: 1.3rem !important;
        margin-bottom: 1rem !important;
    }

    /* 連絡先セクションの長くなった見出しの最適化 */
    .contact-info-content h3 {
        font-size: 1.0rem !important;
        margin-bottom: 0.6rem !important;
        letter-spacing: 0.05em !important;
    }

    /* アクセス制限テキストの改行・サイズ最適化 */
    .restricted-access-text {
        font-size: 1.15rem !important; /* 確実に一行に収めるためさらに縮小 */
        white-space: nowrap !important;
        display: inline-block;
        max-width: 100%;
        letter-spacing: 0.1em !important; /* 文字間隔を少し詰める */
    }
}

/* 600px以下の小型スマホ向け調整 */
@media (max-width: 600px) {
    /* 遷移ページ（food.html等）の戻るボタン配置 */
    .back-btn {
        padding: 0.5rem 0.8rem !important;
        font-size: 0.75rem !important;
        gap: 6px !important;
    }
    .back-btn svg { width: 14px !important; height: 14px !important; }

    /* CONTACTセクション：オブジェクトを本文の下に配置 */
    .module-flex-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1.5rem !important;
    }
    .sf-object-container {
        align-self: center !important;
        margin-top: 1rem !important;
    }

    /* ヘッダーの装飾維持：ステータスバーとの色を統一 */
    .header {
        width: 100% !important;
        z-index: 1000 !important;
        background: #000 !important;
    }

    /* プロジェクト説明文等の改行最適化（英単語を極力維持し、端で折り返す） */
    .card-text {
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    .main-content {
        padding-top: 0 !important; /* Flexboxにより不要になったため削除 */
    }

    /* 地図モーダル */
    .map-modal-content {
        width: 95vw !important;
        height: 85vh !important;
    }
    .map-modal-header {
        padding: 0.6rem 0.8rem !important;
    }
    .map-modal-title {
        font-size: 1rem !important;
        letter-spacing: 0.1em !important;
    }
    .map-coord-display {
        display: none !important; /* モバイルでは座標を非表示にしてスペース確保 */
    }
    .map-modal-system-id {
        font-size: 0.6rem !important;
    }

    .map-side-panel {
        display: none !important; /* モバイルでは地図を優先するためサイドパネルを非表示 */
    }

    .map-modal-footer {
        flex-direction: column !important;
        padding: 0.5rem !important;
        gap: 0.3rem !important;
        font-size: 0.65rem !important;
    }
    .map-footer-center {
        display: none !important; /* 中央のティッカーを非表示 */
    }
    .map-footer-right {
        text-align: center !important;
    }
    .map-footer-left {
        justify-content: center !important;
    }

    /* メールアドレスの折り返し防止 */
    .contact-cyber-link {
        width: auto !important;
        max-width: 100% !important;
        font-size: 0.8rem !important;
        padding: 0.4rem 1rem !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-x: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* MUSIC PAGE - ARTIST SECTION MOBILE */
    .artist-sub-window {
        padding: 2rem 0 !important;
        margin-bottom: 0 !important;
    }
    .artist-media {
        width: 100% !important;
        max-width: 380px !important;
        height: auto !important;
        margin: 0 auto;
        padding: 0.5rem !important;
    }
    .artist-media iframe {
        width: 100% !important;
        aspect-ratio: 350 / 515;
        height: auto !important;
    }
    .artist-name {
        font-size: 1.6rem !important;
        text-align: center;
    }
    .artist-description {
        font-size: 0.85rem !important;
        text-align: center;
    }
    .track-name {
        font-size: 0.95rem !important;
    }
    .link-btn-container {
        display: flex;
        justify-content: center;
    }
    .artist-link-btn {
        padding: 0.8rem 1.5rem !important;
        font-size: 0.85rem !important;
    }
}