/* ==========================================================================
   変数定義 (カラーパレット) - ゴールドテーマ
   ========================================================================== */
:root {
    --bg-color: #0d1a26;
    --text-color: #e0e0e0;
    --primary-color: #c5a773;
    --card-bg: #1a2f40;
}

/* (基本設定と背景は変更なし) */
body { font-family: 'Helvetica Neue', 'Arial', 'Hiragino Sans', 'Meiryo', sans-serif; background-color: var(--bg-color); color: var(--text-color); margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; }
.video-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.video-background video { width: 100%; height: 100%; object-fit: cover; }
#realtime-moon-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 0; pointer-events: none; }
#realtime-moon-image { filter: drop-shadow(0 0 20px rgba(255, 255, 220, 0.6)); opacity: 0; transition: opacity 1.5s ease-in-out; }
#realtime-moon-image.visible { opacity: 1; }

/* (アプリケーションコンテナとヘッダーは変更なし) */
.app-container { width: 100%; max-width: 900px; text-align: center; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 20px; }
.app-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(13, 26, 38, 0.8); border-radius: 15px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); z-index: -1; }
header { width: 100%; }
header h1 { margin: 0 0 15px 0; padding: 0; line-height: 1; }
#title-logo { max-width: 80%; height: auto; }
#header-info { transition: opacity 0.5s, height 0.5s, margin 0.5s; overflow: hidden; }
#header-info.hidden-by-js { opacity: 0; height: 0; margin: 0; }
#catchphrase { font-size: 1em; color: var(--text-color); line-height: 1.6; max-width: 500px; margin-top: 0; margin-bottom: 20px; padding: 0 15px; }
#current-date { font-size: 1.1em; color: var(--text-color); margin: 0 0 5px 0; font-weight: bold; }
#header-moon-description { font-size: 1em; color: var(--text-color); margin: 0; padding: 0 20px; min-height: 1.2em; transition: opacity 0.5s; }

/* (テーマ選択は変更なし) */
#theme-selection { width: 100%; margin-top: 20px; margin-bottom: 20px; }
#theme-selection h2 { font-size: 1.2em; color: var(--primary-color); margin-bottom: 15px; font-weight: normal; }
.theme-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.theme-btn { padding: 10px 24px; font-size: 1.1em; font-weight: bold; border: 2px solid var(--primary-color); background-color: transparent; color: var(--primary-color); border-radius: 50px; cursor: pointer; transition: all 0.3s ease; }
.theme-btn:hover { background-color: var(--primary-color); color: var(--bg-color); }
.theme-btn.active { background-color: var(--primary-color); color: var(--bg-color); box-shadow: 0 0 15px rgba(197, 167, 115, 0.5); }

/* (カード関連は変更なし) */
#card-container { margin-top: 20px; perspective: 1000px; position: relative; min-height: 250px; width: 100%; transition: height 0.5s ease-in-out; }
.card { width: 80px; height: 140px; transform-style: preserve-3d; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.6s, box-shadow 0.3s, top 0.5s ease-out, left 0.5s ease-out, opacity 0.5s; }
.app-container[data-state='initial'] .card,
.app-container[data-state='shuffling'] .card { cursor: default; }
.app-container[data-state='ready'] .card { cursor: pointer; }
.card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; border: 2px solid var(--text-color); border-radius: 8px; background-color: var(--card-bg); }
.card.flipped .card-inner { transform: rotateY(180deg); }
.card-front, .card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-size: cover; background-position: center; border-radius: 6px; }
.card-back { background-color: var(--primary-color); }
.card-front { transform: rotateY(180deg); }
.card.shuffled-spread:hover { transform: translateY(-10px) scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.4); z-index: 100; }
.card.shuffling { box-shadow: 0 5px 15px rgba(0,0,0,0.3); }

/* ▼▼▼ コントロールボタンと案内文のスタイルを修正 ▼▼▼ */
#controls { margin-top: 20px; overflow: auto; padding-top: 5px; }
#controls button, #result-area button { font-size: 1.2em; font-weight: bold; color: var(--bg-color); text-shadow: 0 1px 1px rgba(255,255,255,0.3); padding: 12px 28px; border: none; border-radius: 50px; cursor: pointer; background: var(--primary-color); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; }
#controls button:hover, #result-area button:hover { background: #d4b88a; transform: translateY(-3px); box-shadow: 0 7px 20px rgba(197, 167, 115, 0.3); }
#controls button:active, #result-area button:active { transform: translateY(1px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: all 0.1s ease; }

/* ★★★ 新しいボタン表示制御ルール ★★★ */
#stopButton { display: none; }
/* 'shuffling'状態の時だけ、シャッフルボタンを隠し、ストップボタンを表示する */
.app-container[data-state='shuffling'] #shuffleButton { display: none; }
.app-container[data-state='shuffling'] #stopButton { display: inline-block; }

#guide-message { font-size: 1.2em; font-weight: bold; color: var(--text-color); min-height: 1.5em; transition: opacity 0.5s, height 0.5s, margin 0.5s, padding 0.5s; }
#guide-message.hidden-by-js { opacity: 0; height: 0; margin: 0; padding: 0; border: none; overflow: hidden; }

/* (結果表示エリアは変更なし) */
#result-area { margin-top: 20px; padding: 20px; width: 100%; }
.result-content { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; margin-bottom: 20px; }
.result-card img { width: 120px; height: 210px; border-radius: 8px; border: 3px solid var(--text-color); }
.result-details { text-align: center; max-width: 450px; }
.moon-info { display: flex; align-items: center; justify-content: center; gap: 15px; }
#moon-image { width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; object-fit: cover; }
.moon-info > div { display: flex; flex-direction: column; align-items: flex-start; }
#moon-description { font-size: 0.9em; color: var(--text-color); margin: 0; }
#result-text { text-align: left; background-color: rgba(0, 0, 0, 0.2); padding: 20px 25px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); margin-top: 20px; }
#result-text h3 { color: var(--primary-color); text-align: center; margin-top: 0; margin-bottom: 20px; font-size: 1.4em; line-height: 1.4; }
#result-text h4 { display: inline-block; width: 100%; margin-top: 25px; margin-bottom: 10px; border-bottom: 1px solid rgba(197, 167, 115, 0.3); padding-bottom: 8px; font-size: 1.15em; color: var(--text-color); }
#result-text p { line-height: 1.8; margin: 0 0 1em 0; white-space: pre-wrap; }
#result-text ul { list-style: none; padding-left: 0; margin-top: 0; }
#result-text li { margin-bottom: 10px; padding-left: 1.8em; text-indent: -1.8em; line-height: 1.6; }
#result-text li::before { content: '❤'; color: var(--primary-color); margin-right: 0.7em; font-size: 1.1em; }
.wellness-item { margin-bottom: 15px; padding-left: 10px; border-left: 3px solid rgba(197, 167, 115, 0.5); }
.wellness-item strong { font-size: 1.05em; color: var(--text-color); }
.wellness-item p { font-size: 0.9em; color: #b0b0b0; margin-top: 5px; }
#result-text .lucky-info { margin-top: 25px; padding-top: 15px; border-top: 1px dashed rgba(255, 255, 255, 0.2); }
#result-text .lucky-info p { margin: 0.5em 0; line-height: 1.6; }
.hidden { display: none !important; }