/* --- リセット & レトロ風 --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  color: #0f0;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: flex-start;
}

/* --- ゲーム画面 --- */
#container {
  display: flex;
  flex-direction: row;  /* 左：ログ / 右：ゲーム本体 */
  width: 100%;
  height: 500px;
  max-width: 1200px;
  margin: 20px;
  gap: 20px;
}

/* 左カラム：ログ */
#log {
  flex: 5px;
  background: #111;
  padding: 8px;         /* 少し余裕を減らす */
  margin: 2px;
  border: 2px solid #0f0;
  border-radius: 8px;
  overflow-y: auto;
  max-height: 800vh;
  font-size: 0.85em;
  box-shadow: 0 0 6px #0f0 inset;
  display: flex;
  flex-direction: column-reverse; /* 新しい要素を上に積む */
  gap: 2px;           /* 行間を狭める */
}

#log div {
  margin: 0;
  padding: 1px 0;     /* 内側余白を少なめに */
  line-height: 1.2em; /* 高さを揃える */
}


.log-time {
  color: #fff;
  margin-right: 4px;
  font-weight: bold;
}

.log-relay {
  color: #0af;
  font-weight: bold;
}

.log-success {
  color: #0f0;
}

.log-fail {
  color: #f33;
}

/* ゲームスタートボタン */
#startBtn {
  display: block;
  margin: 50px auto;
  padding: 15px 40px;
  font-size: 1.2em;
  font-family: "Courier New", monospace;
  color: #fff;
  background-color: #444;
  border: 2px solid #888;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: 0.2s;
}

#startBtn:hover {
  background-color: #666;
  border-color: #aaa;
}

/* 右カラム：ゲーム本体 */
#game {
  flex: 2;
  background: #111;
  padding: 16px;
  border: 2px solid #0f0;
  border-radius: 8px;
  min-width: 400px;
  box-shadow: 0 0 6px #0f0 inset;
}

/* 本文エリア */
#text {
  white-space: pre-line; /* JSONの改行を反映 */
  margin: 1em 0;
  font-size: 1.2em;
}

/* 選択肢ボタン */
#choices {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.choice {
  display: block;
  margin: 10px 0;
  padding: 15px;
  width: 160px;
  background: #055;
  border-radius: 8px;
  cursor: pointer;
  color: #0f0;
  border: 2px solid #0f0;
  text-align: center;
}

.choice:hover {
  background: #0a0;
  color: #000;
}