/* --- 全体のリセットとフォント --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #f0f4f8; 
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Fredoka One', cursive; 
}

/* --- メインコンテナ --- */
#content {
  position: relative;
  background: #ffffff;
  padding: 25px;
  border-radius: 30px;
  box-shadow: 0 15px 0 rgba(0,0,0,0.05), 0 20px 40px rgba(0,0,0,0.1);
  width: 360px;
  text-align: center;
  overflow: hidden; 
}

/* --- メッセージボード --- */
.message-board { margin-bottom: 20px; perspective: 500px; }
#hyouji {
  background-color: #ffeb3b;
  color: #c62828;
  font-family: 'Fredoka One', cursive;
  font-size: 28px;
  padding: 15px;
  border-radius: 20px;
  border: 4px solid #333;
  box-shadow: 0 8px 0 #fbc02d;
  transform: rotate(-2deg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
}

/* --- パズルグリッド --- */
.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  justify-content: center;
  margin-bottom: 25px;
}

.panel {
  width: 100px;
  height: 100px;
  border-radius: 18px;
  border: 4px solid #3d4143;
  background-color: rgba(255, 255, 255, 0.9);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 4px 0 rgba(0,0,0,0.1);
  cursor: pointer;
  position: relative;
  transition: background-color 0.4s, border-color 0.4s, transform 0.1s;
}

.panel:active { transform: translateY(3px); }

/* --- コントロールグリッド --- */
.controls-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 60px);
  gap: 10px;
  margin-bottom: 20px;
}

/* ボタン共通設定（ぷっくりスタイル） */
.bot, .bot-special, .moves-counter {
  border: none;
  border-radius: 15px;
  font-family: 'Fredoka One', cursive;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  transition: all 0.1s;
}

.bot:active, .bot-special:active, .moves-counter:active {
  transform: translateY(3px);
}

/* --- 個別カラー設定 --- */
/* 1. 設定系（青） */
.input-mode, .sys-sound {
  background-color: #4fc3f7;
  box-shadow: 0 5px 0 #0288d1;
}

/* 2. 手数（赤） */
.moves-counter {
  background-color: #ef5350;
  box-shadow: 0 5px 0 #c62828;
  font-family: 'Roboto Mono', monospace;
  font-size: 24px;
}

/* 3. 実行系（黄） */
.sys-set, .sys-reset {
  background-color: #ffd54f;
  box-shadow: 0 5px 0 #fbc02d;
  color: #333;
}


/* 5. 下段（グレー） ※ここがご希望の場所です */
.mode-select, .start-btn, .rank-btn {
  background-color: #90a4ae;
  box-shadow: 0 5px 0 #546e7a;
}

/* --- 4. 特殊（緑：PEEK & KOTAE） --- */
/* クラスとID両方に同じ色を適用します */
.peek-btn, #kotae {
  background-color: #8bc34a !important; /* 明るい緑 */
  box-shadow: 0 5px 0 #689f38 !important; /* 濃い緑の影 */
  color: #ffffff !important;
  
  /* 初期状態（SET前）の設定 */
  opacity: 0.5;
  cursor: not-allowed;
  
  /* KOTAE専用のサイズ調整もここに統合 */
  min-height: 45px;
  font-size: 14px;
  width: 100%; /* footer内で横いっぱいに広げる場合 */
  transition: all 0.2s;
}

/* footer内の余白調整だけ残す */
.answer-area {
  margin-top: 15px;
  text-align: center;
}

/* 無効化 */
.bot:disabled { filter: grayscale(0.8); cursor: not-allowed; box-shadow: none; }

/* --- モーダル（最前面・中央固定） --- */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.modal-content {
  background: #fff;
  padding: 25px;
  border: 5px solid #333;
  border-radius: 25px;
  width: 85%;
  max-width: 350px;
  text-align: center;
  box-shadow: 0 10px 0 rgba(0,0,0,0.2);
  color: #333;
  animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

#rank-list {
  margin: 15px 0;
  background: #f0f0f0;
  border-radius: 15px;
  padding: 15px;
  min-height: 180px;
  font-family: 'Roboto Mono', monospace;
  font-size: 1.1rem;
  text-align: left;
}

/* アニメーション用数字 */
.ghost-num {
  width: 100px; height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3));
  z-index: 9999;
}

/* --- 5. ランキングモーダル用タブボタンの強化 --- */
.tab-container {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 20px;
}

.tab-btn {
  flex: 1;
  padding: 10px 5px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  font-family: 'Fredoka One', cursive;
  border-radius: 10px !important;
  border: 2px solid #bdc3c7 !important;
  background: #fdfdfd !important;
  color: #7f8c8d !important;
  box-shadow: 0 4px 0 #bdc3c7 !important;
  transition: all 0.1s ease;
  cursor: pointer;
  opacity: 1 !important; /* 透明度を100%にして見やすく */
}

/* ホバー（PC操作時） */
.tab-btn:hover {
  background: #f1f2f6 !important;
}

/* アクティブ（現在選択中の日） */
.tab-btn.active {
  background: #3498db !important; /* POPなブルー */
  color: #ffffff !important;
  border-color: #2980b9 !important;
  box-shadow: 0 2px 0 #21618c !important;
  transform: translateY(2px); /* 押し込んだ見た目 */
}

/* ランキング項目のフォント調整 */
.rank-item {
  font-size: 15px;
  font-weight: bold;
}

/* --- ダンス演出セット：ここから --- */

/* 1. 外側の世界（背景全体）の設定 */
.dancing-bg {
    background: linear-gradient(135deg, #fff9c4 0%, #fff176 25%, #fffde7 50%, #fff176 75%, #fff9c4 100%);
    background-size: 400% 400%;
    animation: lemonGradient 5s ease infinite;
    transition: background 1.0s ease;
}

/* 2. 内側の箱（パズル盤面）を透明にする設定 */
/* 「bodyに.dancing-bgがついている時の#content」という意味です */
.dancing-bg #content {
    background: transparent !important;
    box-shadow: none;
    transition: background 1.0s ease;
}

/* 3. 背景が動くためのアニメーション定義 */
@keyframes lemonGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- ダンス演出セット：ここまで --- */

/* 2. 泡のスタイル */
.lemon-bubble {
    position: fixed;
    bottom: -50px;
    /* 1. 泡のメイン色：透明感のあるスカイブルー */
    background: rgba(179, 229, 252, 0.6); 
    
    /* 2. 縁取り：少し濃いめの水色で輪郭をはっきりさせる */
    border: 1px solid rgba(129, 212, 250, 0.8);
    
    /* 3. 仕上げ：内側に白いハイライトを入れて「光る泡」感を出す */
    box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.5),
                0 0 10px rgba(129, 212, 250, 0.3);
                
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000 !important;
}
/* 泡が数字のすぐ後ろを通るようにレイヤー順を調整 */
.lemon-bubble {
    z-index: 1; 
}
.frenzy-ghost {
    z-index: 10; /* 数字を泡より手前に */
}

/* スマホ用に上書き */
@media (max-width: 768px) {
    .dancing-bg {
        background-size: 200% 200%;     /* 軽くする */
        animation-duration: 12s;        /* ゆっくりする */
        /* animation-timing-function: linear;  ← 必要なら追加 */
    }
}

/* ヘルプ専用の装飾 */
.help-step-img {
    width: 80px; height: 80px;
    margin: 10px auto;
    background: #f0f0f0;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
}


.help-text-ja { font-size: 14px; font-weight: bold; color: #333; margin-top: 10px; }
.help-text-en { font-size: 12px; color: #888; margin-bottom: 10px; font-style: italic; }

/* style.css に追加 */
#tutorial-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none; /* 最初は隠す */
    z-index: 30000;
    justify-content: center;
    align-items: center;
}

.lang-select-box {
    background: #fff;
    padding: 30px;
    border-radius: 25px;
    text-align: center;
    width: 280px;
}

/* 言語選択ボタンも既存の .bot スタイルを適用 */
.lang-btn {
    width: 100%;
    margin: 10px 0;
}