/* アドレスバー対応のビューポート高さ調整 */
:root {
    --vh: 1vh;
}

/* 画面回転案内の基本設定（デフォルトは非表示） */
.orientation-notice {
    display: none !important;
}

/* スマートフォン横画面推奨対応 */
@media screen and (max-width: 768px) {
    /* 基本的なレスポンシブ設定 */
    body {
        font-size: 14px;
        overflow-x: hidden;
        /* アドレスバーによる高さ変動に対応 */
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        min-height: -webkit-fill-available;
    }
    
    /* 縦画面時の案内メッセージ */
    .orientation-notice {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000;
        color: #fff;
        z-index: 10000;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: 'Noto Sans JP', sans-serif;
        text-align: center;
        padding: 2rem;
    }
    
    .orientation-notice h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        color: #4ecdc4;
    }
    
    .orientation-notice p {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 2rem;
    }
    
    .orientation-notice .rotate-icon {
        font-size: 3rem;
        animation: rotate-hint 2s ease-in-out infinite;
    }
    
    @keyframes rotate-hint {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(90deg); }
        75% { transform: rotate(90deg); }
    }
    
    /* 横画面時（推奨）の最適化 */
    @media (orientation: landscape) {
        .orientation-notice {
            display: none !important;
        }
        
        /* 横画面時のUI調整 */
        .text-box {
            max-height: 40vh;
        }
        
        .character-layer {
            height: 60vh;
        }
    }
    
    /* スマホかつ縦画面時のみ案内表示 */
    @media (orientation: portrait) and (max-width: 768px) {
        .orientation-notice {
            display: flex !important;
        }
        
        /* 縦画面時はゲーム画面を隠す */
        body > *:not(.orientation-notice) {
            display: none !important;
        }
    }
}

/* タブレット対応 */
@media screen and (max-width: 768px) {
    /* タイトル画面 */
    .game-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    
    .subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .title-container {
        padding: 1rem;
        position: relative;
        top: -100px;
    }
    
    .title-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        gap: 1rem;
        margin-top: -20px;
    }
    
    .btn {
        width: 100%;
    }
    
    /* スタートボタンの調整 */
    #title-screen .btn-primary,
    .title-container .btn-primary,
    button.btn-primary {
        font-size: 1.6rem !important;
        padding: 0.8rem 1.5rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        min-height: auto !important;
    }
    
    /* キャラクター画像 - タブレット用に最適化 */
    .character-layer,
    #main-screen .character-layer,
    .screen .character-layer {
        position: absolute !important;
        height: 75% !important;  /* 画面の75%使用 */
        bottom: 0 !important; /* 画面下端に配置 */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 30 !important; /* 光エフェクト(20)の前面、テキストボックス(40)の背面 */
    }
    
    .character-image {
        max-height: 100% !important;  /* レイヤー内での高さ制限を緩和 */
        max-width: 150% !important;   /* 横幅を拡大 */
        width: auto !important;
        height: auto !important;
        /* transformは設定しない - アニメーション用に開放 */
        transform-origin: bottom center !important;
    }
    
    
    .character-name {
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
    }
    
    /* テキストボックス - デスクトップの比率を維持 */
    body .text-box {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 1.2rem !important;
        padding-left: 3.5rem !important; /* 戻るボタン用スペース */
        height: 120px !important; /* デスクトップの約60% */
        min-height: 120px !important;
    }
    
    /* 戻るボタン - テキストボックス内に配置 */
    .back-button {
        position: absolute !important;
        bottom: 10px !important;
        left: 10px !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
        z-index: 35 !important;
        background: rgba(78, 205, 196, 0.9) !important;
        border: none !important;
        border-radius: 50% !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .dialogue-text {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    
    /* タッチ操作最適化も統合 */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .btn, .choice-button, .modal-btn, 
    .fixed-buttons button, .skip-btn, .sequence-button,
    .digit-button, .puzzle-submit-btn {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* 選択肢 */
    .choice-button {
        min-width: 300px;
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
    
    /* 謎解き */
    .sequence-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
    
    .sequence-button {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
    }
    
    /* その他のタッチ最適化設定 */
    .btn:active, .choice-button:active, .modal-btn:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .fixed-buttons {
        gap: 10px;
    }
    
    .debug-toggle, .settings-toggle {
        width: 40px;
        height: 40px;
        font-size: 1.0rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1;
    }
    
    .debug-menu {
        width: 280px;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .skip-btn {
        padding: 0.5rem 0.75rem;
        margin: 0.2rem;
        font-size: 0.8rem;
        line-height: 1.2;
    }
    
    .settings-container {
        max-height: 85vh;
        max-width: 320px;
        width: 75%;
        padding: 0.8rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* モバイルでは音量調整を非表示 */
    .setting-item:nth-child(2), /* BGM音量 */
    .setting-item:nth-child(3)  /* SE音量 */ {
        display: none !important;
    }

    /* モバイル専用音声ON/OFFボタンを表示 */
    .mobile-audio-control {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .mobile-audio-control label {
        min-width: 60px;
        flex-shrink: 0;
    }

    .mobile-audio-buttons {
        display: flex;
        gap: 0.5rem;
    }

    .mobile-audio-btn {
        flex: 1;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        border: 2px solid #4ecdc4;
        background: transparent;
        color: #4ecdc4;
        border-radius: 5px;
        transition: all 0.3s ease;
    }

    .mobile-audio-btn.active {
        background: #4ecdc4;
        color: #1a1a2e;
    }

    .mobile-audio-btn:hover {
        background: rgba(78, 205, 196, 0.2);
    }

    .mobile-audio-btn.active:hover {
        background: #4ecdc4;
    }

    /* 設定項目の調整 */
    .settings-container h2 {
        font-size: 1.1rem !important;
        margin-bottom: 0.6rem !important;
    }
    
    .setting-item {
        margin-bottom: 0.6rem !important;
        gap: 0.2rem !important;
    }
    
    .setting-item label {
        font-size: 0.8rem !important;
        margin-bottom: 0.1rem !important;
    }
    
    .setting-item select,
    .setting-item input[type="range"] {
        margin-bottom: 0.2rem !important;
        font-size: 1.1rem !important; /* セレクト自体のフォントサイズを大きく */
    }
    
    .volume-display {
        font-size: 0.7rem !important;
        margin-top: 0.1rem !important;
    }
    
    .btn {
        font-size: 0.8rem !important;
        padding: 0.4rem 1.2rem !important;
        margin-top: 0.4rem !important;
        min-width: 80px !important;
    }
    
    input[type="range"] {
        height: 1px;
        width: 75% !important;
        margin-right: 1rem !important;
        -webkit-appearance: none;
        background: linear-gradient(to right, 
            rgba(78, 205, 196, 0.2) 0%, 
            rgba(78, 205, 196, 0.2) 100%) !important;
        border: 1px solid rgba(78, 205, 196, 0.6) !important;
        border-radius: 10px !important;
        padding: 0 !important;
        outline: none;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
        -webkit-appearance: none;
        appearance: none;
        background: #4ecdc4;
        border-radius: 50%;
        cursor: pointer;
        margin-top: 0px; /* 高さ調整後の位置 */
    }
    
    input[type="range"]::-webkit-slider-track {
        height: 8px;
        background: transparent;
        border-radius: 4px;
    }
    
    /* Firefox用のスライダー設定 */
    input[type="range"]::-moz-range-track {
        height: 8px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 4px;
        border: 2px solid rgba(78, 205, 196, 0.8);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    
    input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: #4ecdc4;
        border-radius: 50%;
        border: none;
        cursor: pointer;
    }
    
    .digit-input {
        font-size: 1.5rem !important;
        width: 50px !important;
        height: 55px !important;
        text-align: center;
        border-radius: 8px;
        border: 2px solid #4ecdc4;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        touch-action: manipulation;
    }
    
    .digit-button {
        width: 35px !important;
        height: 25px !important;
        font-size: 1rem !important;
        margin: 2px 0;
    }
    
    .diary-modal-content {
        max-width: 95%;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .puzzle-modal-content {
        max-width: 95%;
        padding: 1.5rem;
    }
}


/* スマートフォン専用（iPhone等） */
@media screen and (max-width: 430px) {
    /* タイトル画面 */
    .game-title {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .subtitle {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    /* タイトルコンテナを更に上に */
    .title-container {
        top: -80px !important;
    }
    
    /* スタートボタンをさらに小さく */
    .btn-primary {
        font-size: 1rem !important;
        padding: 0.6rem 1rem;
    }
    
    .title-buttons {
        margin-top: -25px;
    }
    
    /* キャラクター画像 - スマホ用に最適化 */
    .character-layer,
    #main-screen .character-layer,
    .screen .character-layer {
        position: absolute !important;
        height: 70% !important;  /* 画面の70%使用 */
        bottom: 0 !important; /* 画面下端に配置 */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 30 !important; /* 光エフェクト(20)の前面、テキストボックス(40)の背面 */
    }
    
    .character-image {
        max-height: 100% !important;  /* レイヤー内での高さ制限を緩和 */
        max-width: 120% !important;   /* 横幅を2倍相当に拡大 */
        width: auto !important;
        height: auto !important;
        /* transformは設定しない - アニメーション用に開放 */
        transform-origin: bottom center !important;
    }
    
    
    .character-name {
        font-size: 0.9rem;
        padding: 0.3rem 0.6rem;
    }
    
    /* テキストボックス - デスクトップ比率維持 */
    body .text-box {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 0.8rem !important;
        padding-left: 3rem !important; /* 戻るボタン用スペース */
        height: 100px !important; /* デスクトップの約50% */
        min-height: 100px !important;
    }
    
    /* 戻るボタン - テキストボックス内に確実に配置 */
    .back-button {
        position: absolute !important;
        bottom: 8px !important;
        left: 8px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
        z-index: 35 !important;
        background: rgba(78, 205, 196, 0.9) !important;
        border: none !important;
        border-radius: 50% !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .dialogue-text {
        font-size: 0.75rem;
        line-height: 1.4;
        min-height: auto;
    }
    
    .next-indicator {
        right: 1rem;
        font-size: 0.8rem;
    }
    
    /* サウンド設定モーダル - スマホ用に小さくする */
    .modal-content {
        padding: 1.5rem !important;
        max-width: 300px !important;
        width: 85% !important;
    }
    
    .modal-content h2 {
        font-size: 1.4rem !important;
        margin-bottom: 1rem !important;
    }
    
    .modal-content p {
        font-size: 0.95rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    /* ローワーサード（場所表示）- スマホ用に小さくする */
    .location-display {
        top: 20px !important;
        left: 20px !important;
        transform: scale(0.8) !important;
        transform-origin: top left !important;
    }
    
    .location-text {
        font-size: 0.9rem !important;
        padding: 0.5rem 1.2rem !important;
    }
    
    .location-text::before {
        font-size: 0.8rem !important;
        margin-right: 6px !important;
    }
    
    /* 選択肢 */
    .choices-container {
        gap: 0.8rem;
    }
    
    .choice-button {
        min-width: 250px;
        width: 100%;
        max-width: 400px;
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }
    
    /* 設定画面 */
    .settings-container {
        padding: 0.6rem;
        max-width: 240px;
        width: 70%;
        max-height: 90vh;
    }
    
    /* モバイルでは音量調整を非表示 */
    .setting-item:nth-child(2), /* BGM音量 */
    .setting-item:nth-child(3)  /* SE音量 */ {
        display: none !important;
    }

    /* モバイル専用音声ON/OFFボタンを表示 */
    .mobile-audio-control {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 0.4rem;
    }

    .mobile-audio-control label {
        min-width: 50px;
        flex-shrink: 0;
    }

    .mobile-audio-buttons {
        display: flex;
        gap: 0.4rem;
    }

    .mobile-audio-btn {
        flex: 1;
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        border: 2px solid #4ecdc4;
        background: transparent;
        color: #4ecdc4;
        border-radius: 5px;
        transition: all 0.3s ease;
    }

    .mobile-audio-btn.active {
        background: #4ecdc4;
        color: #1a1a2e;
    }

    /* より詳細な設定項目調整 */
    .settings-container h2 {
        font-size: 1.0rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .setting-item {
        flex-direction: column;
        align-items: stretch;
        gap: 0.1rem;
        margin-bottom: 0.5rem !important;
    }
    
    .setting-item label {
        font-size: 0.75rem !important;
        margin-bottom: 0.05rem !important;
    }
    
    .setting-item select {
        font-size: 1.0rem !important; /* セレクト自体のフォントサイズを大きく */
        padding: 0.3rem !important;
    }
    
    .volume-display {
        font-size: 0.65rem !important;
        margin-top: 0.05rem !important;
    }
    
    .btn {
        font-size: 0.75rem !important;
        padding: 0.3rem 1.0rem !important;
        margin-top: 0.4rem !important;
        min-width: 70px !important;
    }
    
    /* 謎解き画面全体の背景画像設定 */
    #puzzle-code-screen,
    #puzzle-sequence-screen {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    #puzzle-code-screen {
        background-image: url('../images/backgrounds/Quiz1.png') !important;
    }

    #puzzle-sequence-screen {
        background-image: url('../images/backgrounds/Quiz2.png') !important;
    }

    /* パズル画面全体のオーバーレイ */
    #puzzle-code-screen::before,
    #puzzle-sequence-screen::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.6) !important;
        z-index: 0 !important;
    }

    /* 謎解き画面 - JSで完全制御 */
    .puzzle-container {
        position: relative !important;
        z-index: 10 !important;
    }
    
    .screen .puzzle-container .puzzle-question {
        font-size: 0.64rem !important; /* 0.8 * 0.8 = 0.64 */
        margin-bottom: 0.24rem !important; /* 0.3 * 0.8 = 0.24 */
        margin-top: 0.08rem !important; /* 0.1 * 0.8 = 0.08 */
        line-height: 1.15 !important;
        padding: 0.08rem !important; /* 0.1 * 0.8 = 0.08 */
        flex-shrink: 0 !important;
    }
    
    .screen .puzzle-container .puzzle-hints {
        max-width: 100% !important;
        font-size: 0.52rem !important; /* 0.65 * 0.8 = 0.52 */
        margin-bottom: 0.16rem !important; /* 0.2 * 0.8 = 0.16 */
        padding: 0.08rem !important; /* 0.1 * 0.8 = 0.08 */
        line-height: 1.25 !important;
        flex-shrink: 1 !important;
        overflow-y: auto !important;
        max-height: 25vh !important;
    }
    
    /* ヒント情報項目の調整 */
    .hint-item {
        margin-bottom: 0.32rem !important; /* 0.4 * 0.8 = 0.32 */
        padding: 0.16rem !important; /* 0.2 * 0.8 = 0.16 */
        font-size: 0.52rem !important; /* 0.65 * 0.8 = 0.52 */
    }
    
    /* 4桁コード */
    .screen .puzzle-container .digit-input {
        font-size: 0.96rem !important; /* 1.2 * 0.8 = 0.96 */
        width: 36px !important; /* 45 * 0.8 = 36 */
        height: 40px !important; /* 50 * 0.8 = 40 */
        padding: 0.24rem !important; /* 0.3 * 0.8 = 0.24 */
        margin: 0 0.08rem !important; /* 0.1 * 0.8 = 0.08 */
    }
    
    /* コード入力コンテナの調整 */
    .code-input-container {
        flex-shrink: 0 !important;
        margin: 0.1rem 0 !important;
    }
    
    .code-submit-container {
        flex-shrink: 0 !important;
        margin: 0.1rem 0 !important;
    }
    
    .digit-group {
        gap: 0.2rem !important;
    }
    
    .screen .puzzle-container .digit-button {
        width: 24px !important; /* 30 * 0.8 = 24 */
        height: 16px !important; /* 20 * 0.8 = 16 */
        font-size: 0.64rem !important; /* 0.8 * 0.8 = 0.64 */
        margin: 1px 0 !important;
    }
    
    /* 順番パズルの特別調整 */
    
    /* 絵日記ボタン */
    .screen .puzzle-container .diary-check-button {
        font-size: 0.56rem !important; /* 0.7 * 0.8 = 0.56 */
        padding: 0.16rem 0.4rem !important; /* 0.2*0.8=0.16, 0.5*0.8=0.4 */
        margin-bottom: 0.16rem !important; /* 0.2 * 0.8 = 0.16 */
        flex-shrink: 0 !important;
    }
    
    /* 動物アイコンボタン */
    .sequence-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.2rem !important;
        margin: 0.1rem 0 !important;
        flex-shrink: 0 !important;
    }
    
    .sequence-button {
        width: 100% !important;
        height: 36px !important; /* 45 * 0.8 = 36 */
        font-size: 1.04rem !important; /* 1.3 * 0.8 = 1.04 */
        aspect-ratio: 1 !important;
        max-width: 52px !important; /* 65 * 0.8 = 52 */
        justify-self: center !important;
    }
    
    /* 選択した順番表示 */
    .sequence-display {
        display: flex !important;
        gap: 0.12rem !important; /* 0.15 * 0.8 = 0.12 */
        margin-bottom: 0.16rem !important; /* 0.2 * 0.8 = 0.16 */
        justify-content: center !important;
        flex-wrap: wrap !important;
        flex-shrink: 0 !important;
        min-height: 24px !important; /* 30 * 0.8 = 24 */
    }
    
    .sequence-item {
        width: 20px !important; /* 25 * 0.8 = 20 */
        height: 20px !important; /* 25 * 0.8 = 20 */
        font-size: 0.72rem !important; /* 0.9 * 0.8 = 0.72 */
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* パズルアクションボタン */
    .sequence-action-buttons {
        display: flex !important;
        gap: 0.3rem !important;
        margin-top: 0.1rem !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    
    .sequence-action-buttons .btn {
        min-width: 48px !important; /* 60 * 0.8 = 48 */
        font-size: 0.56rem !important; /* 0.7 * 0.8 = 0.56 */
        padding: 0.24rem 0.48rem !important; /* 0.3*0.8=0.24, 0.6*0.8=0.48 */
    }
    
    .screen .puzzle-container .puzzle-submit-btn {
        font-size: 0.56rem !important; /* 0.7 * 0.8 = 0.56 */
        padding: 0.24rem 0.48rem !important; /* 0.3*0.8=0.24, 0.6*0.8=0.48 */
        margin-top: 0 !important;
    }
    
    /* シーケンスパズルコントロールの調整 */
    .sequence-puzzle-controls {
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* 横向き対応 */
@media screen and (max-height: 500px) {
    .character-layer {
        height: 50%;
    }
    
    .text-box {
        height: 80px !important; /* 固定高さ、より小さく */
        padding: 0.6rem 1.2rem 0.6rem 2.5rem !important; /* 戻るボタン用スペース */
    }
    
    .back-button {
        position: absolute !important;
        bottom: 5px !important;
        left: 5px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 0.7rem !important;
        z-index: 35 !important;
        background: rgba(78, 205, 196, 0.9) !important;
        border: none !important;
        border-radius: 50% !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .dialogue-text {
        min-height: 40px;
    }
    
    .choices-container {
        bottom: 220px;
    }
    
}

/* 中間サイズ（タブレット・小さめPC）対応 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* モバイルでは音量調整を非表示 */
    .setting-item:nth-child(2), /* BGM音量 */
    .setting-item:nth-child(3)  /* SE音量 */ {
        display: none !important;
    }

    /* モバイル専用音声ON/OFFボタンを表示 */
    .mobile-audio-control {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
    }

    .mobile-audio-control label {
        min-width: 70px;
        flex-shrink: 0;
    }

    .mobile-audio-buttons {
        display: flex;
        gap: 0.6rem;
    }

    .mobile-audio-btn {
        flex: 1;
        padding: 0.6rem 1.2rem;
        font-size: 1rem;
        border: 2px solid #4ecdc4;
        background: transparent;
        color: #4ecdc4;
        border-radius: 5px;
        transition: all 0.3s ease;
    }

    .mobile-audio-btn.active {
        background: #4ecdc4;
        color: #1a1a2e;
    }

    .mobile-audio-btn:hover {
        background: rgba(78, 205, 196, 0.2);
    }

    .mobile-audio-btn.active:hover {
        background: #4ecdc4;
    }

    /* タッチ操作最適化 */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* 右上ボタンの調整 */
    .fixed-buttons {
        top: 15px;
        right: 15px;
        gap: 8px;
    }
    
    .debug-toggle, .settings-toggle {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1;
    }
    
    /* タイトル画面の調整 */
    .title-container {
        top: -110px;
    }
    
    .title-buttons {
        margin-top: -25px;
    }
    
    /* スタートボタンの調整 */
    .btn-primary {
        font-size: 1.7rem !important;
        padding: 0.75rem 1.4rem;
    }
    
    /* サウンド設定モーダルの調整 */
    .modal-content {
        padding: 1.3rem !important;
        max-width: 400px !important;
        width: 80% !important;
    }
    
    .modal-content h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1.1rem !important;
    }
    
    .modal-content p {
        font-size: 1.0rem !important;
        margin-bottom: 0.9rem !important;
    }
    
    /* サウンドモーダルのボタン調整 */
    .modal-content .modal-buttons button {
        font-size: 0.9rem !important;
        padding: 0.65rem 1.3rem !important;
    }
    
    /* 設定モーダルのセレクトボックス調整 */
    .settings-container select {
        font-size: 1.2rem !important;
        padding: 0.5rem !important;
    }
    
    /* テキストボックスの調整 */
    body .text-box {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 1.0rem !important;
        padding-left: 3.2rem !important; /* 戻るボタン用スペース */
        height: 130px !important;
        min-height: 130px !important;
    }
    
    /* 戻るボタンの調整 */
    .back-button {
        position: absolute !important;
        bottom: 9px !important;
        left: 9px !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 0.85rem !important;
        z-index: 35 !important;
        background: rgba(78, 205, 196, 0.9) !important;
        border: none !important;
        border-radius: 50% !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* テキストサイズの調整 */
    .dialogue-text {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* キャラクター名の調整 */
    .character-name {
        font-size: 1.05rem;
        padding: 0.45rem 0.9rem;
    }
    
    /* 次へ進むインジケーターの調整 */
    .next-indicator {
        right: 0.7rem;
        bottom: 0.7rem;
        font-size: 1.1rem;
    }
    
    /* キャラクター画像の調整 */
    .character-layer,
    #main-screen .character-layer,
    .screen .character-layer {
        position: absolute !important;
        height: 100vh !important;  /* ビューポート全高を使用 */
        bottom: 0 !important; /* 画面下端に配置 */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 30 !important; /* 光エフェクト(20)の前面、テキストボックス(40)の背面 */
    }
    
    .character-image {
        max-height: 100% !important;  /* レイヤー内での高さ制限を緩和 */
        max-width: 200% !important;   /* 横幅をさらに拡大 */
        width: auto !important;
        height: auto !important;
        /* transformは設定しない - アニメーション用に開放 */
        transform-origin: bottom center !important;
    }
    
    /* ローワーサード（場所表示）の調整 */
    .location-display {
        top: 25px !important;
        left: 25px !important;
        transform: scale(0.85) !important;
        transform-origin: top left !important;
    }
    
    .location-text {
        font-size: 0.95rem !important;
        padding: 0.6rem 1.3rem !important;
    }
    
    .location-text::before {
        font-size: 0.85rem !important;
        margin-right: 7px !important;
    }
    
    /* 選択肢ボタンの調整 */
    .choice-button {
        min-width: 320px;
        padding: 0.8rem 1.6rem;
        font-size: 1.05rem;
        line-height: 1.4;
    }
    
    /* 謎解き画面全体の背景画像設定 */
    #puzzle-code-screen,
    #puzzle-sequence-screen {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    #puzzle-code-screen {
        background-image: url('../images/backgrounds/Quiz1.png') !important;
    }

    #puzzle-sequence-screen {
        background-image: url('../images/backgrounds/Quiz2.png') !important;
    }

    /* パズル画面全体のオーバーレイ */
    #puzzle-code-screen::before,
    #puzzle-sequence-screen::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.6) !important;
        z-index: 0 !important;
    }

    /* パズル画面の調整 - JSで完全制御 */
    .puzzle-container {
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* パズル質問テキスト */
    .screen .puzzle-container #puzzle-question, 
    .screen .puzzle-container #sequence-question,
    .screen .puzzle-container .puzzle-question {
        font-size: 0.72rem !important; /* 0.9 * 0.8 = 0.72 */
        margin-bottom: 0.64rem !important; /* 0.8 * 0.8 = 0.64 */
        margin-top: 0.4rem !important; /* 0.5 * 0.8 = 0.4 */
        padding: 0.24rem !important; /* 0.3 * 0.8 = 0.24 */
    }
    
    /* ヒントコンテナ */
    #puzzle-hints {
        font-size: 0.52rem !important; /* 0.65 * 0.8 = 0.52 */
        max-height: 40vh !important;
        overflow-y: auto !important;
        padding: 0.24rem !important; /* 0.3 * 0.8 = 0.24 */
    }
    
    .hint-wrapper {
        margin-bottom: 0.48rem !important; /* 0.6 * 0.8 = 0.48 */
    }
    
    .hint-label {
        padding: 0.28rem 0.56rem !important; /* 0.35*0.8=0.28, 0.7*0.8=0.56 */
        font-size: 0.52rem !important; /* 0.65 * 0.8 = 0.52 */
        min-height: 1.2rem !important; /* 1.5 * 0.8 = 1.2 */
    }
    
    .hint-content {
        padding: 0.28rem !important; /* 0.35 * 0.8 = 0.28 */
        font-size: 0.52rem !important; /* 0.65 * 0.8 = 0.52 */
        min-height: 1.2rem !important; /* 1.5 * 0.8 = 1.2 */
        margin-top: 0.16rem !important; /* 0.2 * 0.8 = 0.16 */
    }
    
    /* 4桁入力フィールド */
    .screen .puzzle-container .digit-input {
        width: 33.6px !important; /* 42 * 0.8 = 33.6 */
        height: 33.6px !important; /* 42 * 0.8 = 33.6 */
        font-size: 0.88rem !important; /* 1.1 * 0.8 = 0.88 */
        padding: 0.16rem !important; /* 0.2 * 0.8 = 0.16 */
        margin: 0 0.12rem !important; /* 0.15 * 0.8 = 0.12 */
    }
    
    /* 上下ボタン */
    .screen .puzzle-container .digit-button {
        width: 22.4px !important; /* 28 * 0.8 = 22.4 */
        height: 19.2px !important; /* 24 * 0.8 = 19.2 */
        font-size: 0.64rem !important; /* 0.8 * 0.8 = 0.64 */
        margin: 2px 0 !important;
    }
    
    /* 入力コンテナ */
    .code-input-container {
        margin: 0.24rem 0 !important; /* 0.3 * 0.8 = 0.24 */
        gap: 0.24rem !important; /* 0.3 * 0.8 = 0.24 */
    }
    
    /* 決定ボタン */
    .screen .puzzle-container #code-submit,
    .screen .puzzle-container .puzzle-submit-btn {
        font-size: 0.72rem !important; /* 0.9 * 0.8 = 0.72 */
        padding: 0.4rem 0.96rem !important; /* 0.5*0.8=0.4, 1.2*0.8=0.96 */
        min-width: 72px !important; /* 90 * 0.8 = 72 */
        max-width: 112px !important; /* 140 * 0.8 = 112 */
    }
    
    .code-submit-container {
        margin: 0.32rem 0 0.24rem 0 !important; /* 0.4*0.8=0.32, 0.3*0.8=0.24 */
    }
    
    /* 順番パズルの調整 */
    .screen .puzzle-container .diary-check-button {
        font-size: 0.68rem !important; /* 0.85 * 0.8 = 0.68 */
        padding: 0.32rem 0.64rem !important; /* 0.4*0.8=0.32, 0.8*0.8=0.64 */
        margin-bottom: 0.4rem !important; /* 0.5 * 0.8 = 0.4 */
    }
    
    .sequence-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.32rem !important; /* 0.4 * 0.8 = 0.32 */
        margin: 0.32rem 0 !important; /* 0.4 * 0.8 = 0.32 */
    }
    
    .sequence-button {
        width: 100% !important;
        height: 56px !important; /* 70 * 0.8 = 56 */
        font-size: 1.44rem !important; /* 1.8 * 0.8 = 1.44 */
        max-width: 72px !important; /* 90 * 0.8 = 72 */
        justify-self: center !important;
    }
    
    .sequence-display {
        display: flex !important;
        gap: 0.24rem !important; /* 0.3 * 0.8 = 0.24 */
        margin-bottom: 0.4rem !important; /* 0.5 * 0.8 = 0.4 */
        justify-content: center !important;
        min-height: 32px !important; /* 40 * 0.8 = 32 */
    }
    
    .sequence-item {
        width: 28px !important; /* 35 * 0.8 = 28 */
        height: 28px !important; /* 35 * 0.8 = 28 */
        font-size: 0.88rem !important; /* 1.1 * 0.8 = 0.88 */
    }
    
    .sequence-action-buttons {
        display: flex !important;
        gap: 0.4rem !important; /* 0.5 * 0.8 = 0.4 */
        margin-top: 0.32rem !important; /* 0.4 * 0.8 = 0.32 */
    }
    
    .screen .puzzle-container .sequence-action-buttons .btn {
        min-width: 64px !important; /* 80 * 0.8 = 64 */
        font-size: 0.68rem !important; /* 0.85 * 0.8 = 0.68 */
        padding: 0.32rem 0.72rem !important; /* 0.4*0.8=0.32, 0.9*0.8=0.72 */
    }
    
    /* エフェクトのモバイル対応 - 基本的なtransform設定 */
    #light-effect .light-wave {
        transform: translate(-50%, -50%) !important;
    }
    
    #light-effect .light-orb {
        transform: translate(-50%, -50%) !important;
    }
    
    /* エフェクトアニメーションのモバイル版 */
    @keyframes lightWaveExpandMobile {
        0% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.09); /* 0.3 * 0.3 */
        }
        30% {
            opacity: 0.9;
            transform: translate(-50%, -50%) scale(0.3); /* 0.3 * 1 */
        }
        70% {
            opacity: 0.6;
            transform: translate(-50%, -50%) scale(0.54); /* 0.3 * 1.8 */
        }
        100% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.9); /* 0.3 * 3 */
        }
    }
    
    @keyframes lightOrbExpandMobile {
        0% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.06); /* 0.3 * 0.2 */
        }
        25% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(0.3); /* 0.3 * 1 */
        }
        75% {
            opacity: 0.7;
            transform: translate(-50%, -50%) scale(0.45); /* 0.3 * 1.5 */
        }
        100% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.66); /* 0.3 * 2.2 */
        }
    }
    
    #light-effect .light-wave {
        animation: lightWaveExpandMobile 0.8s ease-out forwards !important;
    }
    
    #light-effect .light-orb {
        animation: lightOrbExpandMobile 1s ease-out forwards !important;
    }
    
}

/* 高解像度ディスプレイ対応 */
@media screen and (min-width: 1920px) {
    .game-title {
        font-size: 4rem;
    }
    
    .subtitle {
        font-size: 2rem;
    }
    
    .btn {
        font-size: 1.4rem;
        padding: 1.2rem 2.5rem;
    }
    
    .text-box {
        min-height: 250px;
        padding: 2.5rem;
    }
    
    .character-name {
        font-size: 1.6rem;
    }
    
    .dialogue-text {
        font-size: 1.5rem;
    }
}