body {
  background:#0D0D0D;
  color:#4CC9F0;
  font-family:monospace;
  text-align:center;
  padding-top:30px;
}

#timing, #metrics, #ping-metrics {
  margin-top:10px;
  font-size:18px;
}
#ping-metrics { color:#4CC9F0; }

/* タイトル画面の PRESS ENTER TO START */
#press-start {
  font-size:18px;      /* ping 情報と同じ大きさ */
  margin:40px;
  color:#4CC9F0;
}

/* 成績タイトル */
#result-title {
  font-size:26px;
  font-weight:bold;
  color:#F72585;
  margin-bottom:15px;
}

/* 成績表ボックス */
#result-box {
  display:inline-block;
  text-align:left;
  border:2px solid #4CC9F0;
  border-radius:6px;
  padding:15px 25px;
  background:rgba(26,26,26,0.85);
  color:#F1FAEE;
  font-size:18px;
  line-height:1.6em;
}

#challenge-area, #typing-area {
  margin:20px auto;
  text-align:left;
  width:80ch;
}

#challenge, #typingInput {
  width:100%;
  box-sizing:border-box;
  display:block;
}

#challenge {
  background:#1A1A1A;
  font-family:monospace;
  font-size:16px;
  line-height:1.4em;
  white-space:pre-wrap;
  border:1px solid #4CC9F0;
  border-radius:4px;
  padding:6px;
  min-height:10em;
}
#challenge .correct { color:#4CC9F0; }
#challenge .pending { color:#F1FAEE; }
#challenge .wrong   { color:#F72585; }

textarea {
  background:#1A1A1A;
  color:#F1FAEE;
  font-family:monospace;
  font-size:16px;
  line-height:1.4em;
  height:10em;
  border:1px solid #4CC9F0;
  border-radius:4px;
  padding:6px;
  resize:none;
}

h2 {
  margin:10px 0 5px;
  font-size:18px;
  color:#F72585;
}

.send-hint {
  text-align:right;
  font-size:14px;
  margin-top:4px;
  color:#aaa;
}

/* 共通UI制御 */
.screen.hidden { display: none; }
.blink { animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* カウントダウンやGo!のメッセージ */
#central-message {
  font-size: 32px;
  font-weight: bold;
  color: #FFD166;   /* 視認性の高いオレンジ */
  margin-top: 40px;
  animation: fadeInOut 1s ease-in-out;
}

/* タイマー */
#timer {
  font-size: 24px;
  font-weight: bold;
  color: #F1FAEE;   /* 明るい白 */
  margin-top: 20px;
}

/* 汎用フェードアニメ */
@keyframes fadeInOut {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}