body {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  background: linear-gradient(180deg, #e0f7fa 0%, #b2ebf2 100%);
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #004d40;
}

/* メインタイトル */
h1 {
  font-size: 2.5rem;
  color: #00796b;
  text-shadow: 2px 2px 0px #ffffff;
  margin-bottom: 20px;
  letter-spacing: 2px;
}

/* 開始ボタン */
#button {
  background-color: #ffb74d;
  color: #fff;
  border: none;
  padding: 12px 30px;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 4px 0 #f57c00;
  transition: all 0.1s ease;
  margin-bottom: 25px;
}

#button:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* ゲーム情報のステータス表示（時間、ポイントなど） */
#time, #point, #best {
  font-size: 1.3rem;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 8px 20px;
  border-radius: 15px;
  margin: 10px;
  display: inline-block;
  border: 2px solid #80deea;
}

#time {
  color: #d32f2f; /* 時間は目立つように赤系 */
}

#point {
  color: #388e3c; /* ポイントは緑系 */
}

/* お題（片付けるもの）の表示エリア */
#subject {
  font-size: 2rem;
  font-weight: bold;
  background-color: #ffffff;
  border: 4px dashed #00acc1;
  padding: 20px 40px;
  border-radius: 10px;
  margin: 20px 0;
  min-width: 200px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 選択肢のボタン共通（エビ、浮き輪など） */
/* ボタンを横一列に並べるための専用枠 */
.choices-container {
  display: flex;         /* 横並びにする */
  justify-content: center; /* 中央に寄せる */
  align-items: center;   /* 上下の高さを揃える */
  gap: 8px;              /* ボタン同士の隙間を均等に空ける */
  margin: 20px 0;        /* 上下の余白 */
  width: 100%;           /* 画面幅いっぱいに広げる */
}

/* 選択肢のボタン共通（横一列に収まりやすいサイズ） */
.choices {
  background-color: #ffffff;
  color: #00796b;
  border: 2px solid #00acc1;
  
  /* 横一列で綺麗に収まるサイズに固定 */
  width: 90px;           /* 5個並んでも画面からはみ出さないサイズ */
  height: 50px;
  padding: 0;
  
  font-size: 1rem;       /* 文字サイズを少し調整 */
  font-weight: bold;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 0 #00acc1;
  
  /* ※ marginは上の gap で制御するため 0 にします */
  margin: 0; 
}


/* 選択肢ボタンのホバー・アクティブ連動 */
.choices:hover {
  background-color: #e0f7fa;
}

.choices:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* ボタンの個性を出すためのカラーアクセント（任意） */
#boxa { border-color: #ff8a65; color: #d84315; box-shadow: 0 4px 0 #ff8a65; } /* エビ: オレンジ */
#boxb { border-color: #4dd0e1; color: #00838f; box-shadow: 0 4px 0 #4dd0e1; } /* 浮き輪: 水色 */
#boxc { border-color: #81c784; color: #2e7d32; box-shadow: 0 4px 0 #81c784; } /* スイカ: 緑 */
#boxd { border-color: #ffd54f; color: #f57f17; box-shadow: 0 4px 0 #ffd54f; } /* ひまわり: 黄 */
#boxe { border-color: #b0bec5; color: #37474f; box-shadow: 0 4px 0 #b0bec5; }