/* style-mobile.css - スマートフォン（900px以下）での縦積み表示専用 */

/* =============================================== */
/* 1. 全体設定 (Mobile/Smartphone Base) */
/* =============================================== */
:root {
    --glass-color: rgba(0, 0, 0, 0.4); 
}

body {
    /* Flexboxを削除し、テキストとコンテナを中央寄せ */
    text-align: center; 
    padding-top: 20px; 
    
    background-image: url('fantasy-cyberpunk-narnia.png'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* =============================================== */
/* 7. メインタイトル */
/* =============================================== */
#main-title {
    font-size: 3em; 
    font-weight: 700;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple), 0 0 40px #ff00ff;
    margin-bottom: 20px; 
    z-index: 20; 
}

@media screen and (max-width: 600px) {
    #main-title {
        font-size: 2.5em; /* さらに小さいスマホ向け */
    }
}


/* =============================================== */
/* 2. メインコンテナとパネル */
/* =============================================== */
.container {
    flex-direction: column !important; /* 縦積み表示を強制 */
    gap: 20px;
    padding: 20px;
    width: 95%;
    margin: 0 auto 20px auto; 
    text-align: left; /* コンテナ内の文字は左寄せに戻す */
}

.panel {
    background: var(--glass-color); 
    padding: 20px;
    min-width: unset;
}

h2 {
    font-size: 1.4em;
    text-shadow: 0 0 8px var(--neon-blue), 0 0 15px var(--neon-blue);
}

/* =============================================== */
/* 3. 要素のサイズ調整 */
/* =============================================== */

/* ムード入力パネル内の要素を中央揃えにする */
#mood-input {
    display: flex; 
    flex-direction: column;
    /* ★修正強化点: これで子要素全体を水平方向の中央に配置 */
    align-items: center; 
    gap: 20px;
    flex-grow: 1; 
}

/* カラーホイールを小さく */
#color-wheel-container {
    width: 180px;
    height: 180px;
    /* 中央寄せを再適用 */
    margin: 0 auto 15px auto; 
}

/* 再生中の脈動アニメーション（Mobile版） */
.is-playing-pulse::after {
    animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
    from {
        box-shadow: 0 0 15px var(--selected-color), 0 0 5px var(--selected-color) inset;
    }
    to {
        box-shadow: 0 0 30px var(--selected-color), 0 0 10px var(--selected-color) inset;
    }
}


/* キーワード入力欄とボタンの調整 */
/* widthを調整し、margin autoで中央寄せを保証 */
#keywords {
    /* ★修正強化点: 幅を少し狭めて margin auto が効くようにする */
    width: 90%; 
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.9em;
    padding: 10px;
    box-sizing: border-box; 
}

#analyze-button {
    /* ★修正強化点: 幅を少し狭めて margin auto が効くようにする */
    width: 90%; 
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1em;
    padding: 10px 20px;
}

/* AI分析結果 */
#mood-result {
    font-size: 0.9em;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

/* 再生ボタンを小さく */
.player-controls {
     /* 再生パネル内の要素も中央寄せ */
    align-items: center; 
}

#play-button {
    width: 60px;
    height: 60px;
    margin: 20px auto;
}

#play-button::before {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 18px solid var(--neon-purple);
}

#play-button.playing::before {
    width: 10px;
    height: 20px;
    border-left: 8px solid var(--neon-purple);
    border-right: 8px solid var(--neon-purple);
}