/* style.css */
body { font-family: 'Helvetica Neue', Arial, sans-serif; background-color: #1a1a1a; color: #fff; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
#game-container { background: #2d2d2d; padding: 30px; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); width: 100%; max-width: 650px; text-align: center; border: 2px solid #444; position: relative; }
h1 { color: #f1c40f; font-size: 26px; margin-bottom: 5px; }

/* ステータスエリア */
#stats { display: flex; justify-content: space-between; margin-bottom: 10px; font-weight: bold; font-size: 18px; background: #222; padding: 10px 20px; border-radius: 8px 8px 0 0; align-items: center; }
#timer { color: #2ecc71; }
#level-badge { color: #f1c40f; background: #34495e; padding: 2px 8px; border-radius: 4px; font-size: 14px; }
.danger-time { color: #e74c3c !important; animation: pulse 0.5s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.05); } }

/* タイムバー */
#progress-container { background: #444; height: 8px; border-radius: 0 0 8px 8px; margin-bottom: 15px; overflow: hidden; position: relative; }
#progress-bar { background: #2ecc71; height: 100%; width: 100%; transition: width 0.2s linear, background-color 0.3s; }
.danger-bar { background: #e74c3c !important; animation: bar-flash 0.5s infinite alternate; }
@keyframes bar-flash { from { opacity: 1; } to { opacity: 0.6; } }

/* ナビゲーター */
#nav-box { display: flex; justify-content: space-around; margin-bottom: 10px; font-size: 16px; font-weight: bold; align-items: center; }
.nav-slot { background: #444; padding: 8px 10px; border-radius: 4px; width: 45%; border: 1px dashed #666; box-sizing: border-box; min-height: 40px; display: flex; align-items: center; justify-content: center; position: relative; }
.nav-active { border-color: #f1c40f; color: #f1c40f; background: #3a341c; }
.nav-filled { background: #1e3d23; color: #2ecc71; border-style: solid; }

#question-box { background: #3d3d3d; padding: 5px 10px; min-height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: bold; margin-bottom: 15px; line-height: 1.5; border-left: 5px solid #f1c40f; }

/* 選択肢ボタン */
.btn-container {
    display: grid;
    /* 4列(repeat(4, 1fr)) ではなく、2列(repeat(2, 1fr)) に変更 */
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px; /* 2列だと余裕ができるので、隙間を広げるとより押しやすくなります */
    
    max-width: 500px; /* 2列ならこのくらいの幅が一番指に馴染みます */
    margin: 0 auto;
}

/* 1. 通常のボタンの見た目 */
.btn-container button {
  font-size: 16px !important;
  padding: 10px;
  word-break: keep-all;
  white-space: nowrap;
  
  /* 追加したい操作感の設定 */
  border-radius: 6px;
  transition: opacity 0.2s;
}

/* 2. 押したときだけのアクション（これだけでひとつのルール） */
.btn-container button:active {
  opacity: 0.7;
}

.opt-btn { background: #34495e; color: white; border: 1px solid #555; padding: 16px 2px; border-radius: 8px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.1s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-btn:hover { background: #4e6a85; border-color: #f1c40f; }
.opt-btn:active { transform: scale(0.95); }


.action-area {
  display: flex;
  justify-content: flex-end; /* ここを調整してもOK */
  width: 100%;             /* ここも必要に応じて変更OK */
  max-width: 500px;        /* ここを追加するのもOK */
  margin: 10px auto 0;     /* これも丸ごと入れ替えてOK */
}
.clear-btn { background: #e67e22; color: white; border: none; padding: 6px 16px; border-radius: 4px; font-size: 13px; cursor: pointer; font-weight: bold; transition: background 0.1s; }
.clear-btn:hover { background: #d35400; }
.visibility-hidden { visibility: hidden; }

.quit-btn { background: #7f8c8d; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; font-weight: bold; }
.quit-btn:hover { background: #c0392b; }

#start-screen { text-align: center; padding: 15px 20px; display: flex; flex-direction: column; align-items: center; }
.start-btn { background: #2ecc71; color: white; border: none; padding: 14px 50px; border-radius: 8px; font-size: 22px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(46,204,113,0.4); margin-bottom: 15px; width: fit-content; }
.start-btn:hover { background: #27ae60; }

/* 設定ボタンスタイル */
.settings-toggle-btn { background: #444; color: #ccc; border: 1px solid #555; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: bold; cursor: pointer; margin-bottom: 10px; transition: all 0.2s; }
.settings-toggle-btn:hover { background: #555; color: #fff; }

/* 設定グループ */
.settings-group { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 5px; overflow: hidden; max-height: 0; transition: max-height 0.3s ease-out; width: 100%; }
.settings-group.open { max-height: 200px; } 

.setting-box { 
    display: flex; 
    justify-content: flex-start; 
    align-items: center; 
    gap: 10px; 
    background: #222; 
    padding: 8px 14px; 
    border-radius: 6px; 
    width: 290px; 
    border: 1px solid #444; 
    cursor: pointer; 
    user-select: none; 
    font-size: 13px; 
    box-sizing: border-box; 
}
.setting-box input[type="checkbox"] { cursor: pointer; margin: 0; width: 16px; height: 16px; flex-shrink: 0; }
.setting-box select { background: #333; color: #fff; border: 1px solid #555; padding: 2px 6px; border-radius: 4px; font-weight: bold; font-size: 13px; cursor: pointer; margin-left: auto; }
.time-label { font-weight: bold; }

/* 過去の履歴表示 */
.history-title { font-size: 14px; font-weight: bold; color: #f1c40f; margin: 20px 0 6px 0; text-align: left; width: 290px; border-bottom: 1px solid #444; padding-bottom: 4px; }
.history-list { display: flex; flex-direction: column; gap: 6px; width: 290px; font-size: 13px; text-align: left; color: #ccc; }
.history-item { background: #222; padding: 8px 14px; border-radius: 4px; display: flex; justify-content: space-between; border-left: 3px solid #2ecc71; }
.history-empty { text-align: center; color: #666; font-style: italic; padding: 10px; }

.hide { display: none !important; }
.flash-correct { background-color: #1e3d23 !important; transition: background 0s; }
.flash-wrong { background-color: #3d1e1e !important; transition: background 0s; }

/* 結果画面のスタイルを追加 */
#result-screen {
    background: #2d2d2d;
    padding: 30px;
    border-radius: 16px;
    border: 2px solid #444;
    text-align: center;
    color: white;
}

/* --- 2. 画面幅が520px以上のときだけ上書き（4列にする） --- */
@media (min-width: 520px) {
    .btn-container {
        grid-template-columns: repeat(4, 1fr); /* 520px以上なら4列に変化 */
    }
}