/* モバイル最適化スタイル */
/* モバイルデバイス向けのユーザーエクスペリエンス向上用スタイル */

/* 768px以下の画面サイズ用スタイル */
@media screen and (max-width: 768px) {
    /* 一般レイアウト調整 */
    body {
        font-size: 14px; /* モバイルでの読みやすさ向上のための小さなフォントサイズ */
        padding: 0;
        margin: 0;
        overflow-x: hidden;
    }

    .container {
        padding: 15px 10px;
        max-width: 100%; /* コンテナが全幅を使用することを保証 */
    }

    h1 {
        font-size: 2.2em; /* モバイル用の小さなヘッダー */
        margin-bottom: 15px;
    }

    /* カウントダウン調整 */
    .countdown {
        font-size: 1.1em;
        padding: 10px;
        margin: 15px 0;
        max-width: 100%; /* カウントダウンの全幅表示 */
    }

    .countdown h1 {
        font-size: 1.8em;
        margin-bottom: 15px;
    }

    .countdown .time {
        gap: 10px;
    }

    .countdown .time span {
        min-width: 50px;
        font-size: 1.5em;
        padding: 8px 12px;
    }

    /* ケーキコンテナ */
    .cake-container {
        width: 220px;
        height: 220px;
        margin: 30px auto 15px;
    }

    /* ボタン */
    .feature-button, #blowButton, #micPermissionBtn {
        padding: 8px 15px;
        font-size: 0.9em;
        margin: 5px;
    }

    /* 音楽プレーヤー */
    .music-player {
        padding: 5px 10px;
        bottom: 10px;
        width: 90%;
        box-sizing: border-box;
    }

    .music-control {
        width: 30px;
        height: 30px;
    }

    .song-title {
        font-size: 0.9em;
    }

    /* ゲームコンテナ */
    .games-container {
        bottom: 60px;
        left: 0;
        width: 100%;
        justify-content: center;
        padding: 5px;
    }

    .game-button {
        padding: 6px 12px;
        font-size: 0.8em;
        margin: 3px;
    }

    /* ソーシャルシェアボタン */
    .social-share {
        right: 5px;
        top: auto;
        bottom: 100px;
        transform: none;
        gap: 5px;
    }

    .share-button {
        width: 35px;
        height: 35px;
    }

    /* カスタムメッセージコンテナ */
    .custom-message-container {
        top: 5px;
        right: 5px;
        gap: 5px;
        max-width: 180px;
    }

    /* アルバムとメモリーウォール */
    .memory-wall {
        width: 98%;
        height: 85%;
        padding: 10px;
    }

    .photo-gallery {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
        padding: 10px;
    }

    /* 掲示板モーダル */
    .bulletin-board-modal .modal-content {
        width: 95%;
        max-width: 320px;
        max-height: 80vh;
        padding: 10px;
    }

    .bulletin-posts {
        max-height: 300px;
        padding: 5px;
    }

    .bulletin-post {
        margin-bottom: 8px;
        padding: 6px;
        font-size: 0.85em;
    }

    .post-form input, .post-form textarea {
        padding: 6px;
        font-size: 0.85em;
    }

    .post-form textarea {
        height: 70px;
    }

    .post-form button, .post-form .gift-select-btn {
        padding: 6px 12px;
        font-size: 0.85em;
    }

    /* バーチャルギフトモーダル */
    .virtual-gift-modal .modal-content {
        width: 95%;
        max-width: 320px;
        padding: 10px;
    }

    .gift-list {
        max-height: 300px;
        padding: 5px;
    }

    .gift-item {
        width: calc(50% - 8px);
        padding: 6px;
        font-size: 0.8em;
    }

    /* パズルゲーム */
    #puzzleArea {
        width: 100%;
        height: 200px;
        margin: 10px auto;
    }

    #piecesContainer {
        width: 100%;
        min-height: 80px;
        margin-top: 10px;
        padding: 5px;
    }
}

/* 超小型画面 */
@media screen and (max-width: 480px) {
    body {
        font-size: 12px;
    }

    h1 {
        font-size: 1.8em;
    }

    .container {
        padding: 10px 5px;
    }

    .countdown {
        font-size: 0.9em;
        padding: 8px;
        margin: 10px 0;
    }

    .countdown h1 {
        font-size: 1.5em;
        margin-bottom: 10px;
    }

    .countdown .time span {
        min-width: 40px;
        font-size: 1.2em;
        padding: 6px 10px;
    }

    .cake-container {
        width: 180px;
        height: 180px;
        margin: 20px auto 10px;
    }

    .feature-button, #blowButton, #micPermissionBtn {
        padding: 6px 10px;
        font-size: 0.8em;
        margin: 3px;
    }

    .music-player {
        padding: 3px 5px;
        bottom: 5px;
    }

    .music-control {
        width: 25px;
        height: 25px;
    }

    .song-title {
        font-size: 0.8em;
    }

    .games-container {
        bottom: 50px;
        padding: 3px;
    }

    .game-button {
        padding: 5px 10px;
        font-size: 0.75em;
    }

    .social-share {
        bottom: 80px;
    }

    .share-button {
        width: 30px;
        height: 30px;
    }

    .custom-message-container {
        top: 3px;
        right: 3px;
        max-width: 160px;
    }

    .photo-gallery {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 5px;
    }

    .bulletin-board-modal .modal-content {
        width: 98%;
        max-width: 290px;
        padding: 8px;
    }

    .bulletin-posts {
        max-height: 250px;
    }

    .post-form textarea {
        height: 60px;
    }

    /* バーチャルギフトモーダル */
    .virtual-gift-modal .modal-content {
        width: 98%;
        max-width: 290px;
        padding: 8px;
    }

    .gift-list {
        max-height: 250px;
    }

    /* バーチャルギフト表示モーダル */
    .virtual-gifts-modal .modal-content {
        width: 98%;
        max-width: 290px;
        padding: 8px;
    }

    .virtual-gifts-list {
        max-height: 250px;
    }

    /* パズルゲーム */
    #puzzleArea {
        height: 180px;
    }

    #piecesContainer {
        min-height: 60px;
    }
}

/* 非常に小さな画面 */
@media screen and (max-width: 320px) {
    body {
        font-size: 11px;
    }

    h1 {
        font-size: 1.5em;
    }

    .cake-container {
        width: 150px;
        height: 150px;
    }

    .custom-message-container {
        max-width: 140px;
    }

    .feature-button, #blowButton, #micPermissionBtn {
        padding: 5px 8px;
        font-size: 0.75em;
    }

    .photo-gallery {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    /* パズルゲーム */
    #puzzleArea {
        height: 150px;
    }
}