.big-ok {
  width: 60px;
  height: 45px; /* ← 元の30pxの1.5倍に */
  font-size: 16px;
}


#resultImage {
  height: auto;
  display: none;
  z-index: 20
}


#problem {
  font-family: 'Courier New', monospace;
  white-space: pre;
  letter-spacing: 0;
  color: black !important; /* この行を追加 */
}

#inputField {
  /* レイアウト */
  width: 180px; 
  min-width: 100px;
  height: 1.5em;
  
  /* テキスト表示 */
  font-family: 'Courier New', monospace;
  font-size: 1.2em;

  overflow: visible;
  
  /* デザイン */
  padding-left: 0;
  margin-left: 0;

}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px; /* 10px → 3pxに統一 */
  width: 180px;
  padding: 3px;
  justify-content: start;
}

.keypad button {
  font-size: 14px;
  padding: 5px 0; /* padding: 8px → 5px 0 に統一 */
}

.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 400px;
}

.close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

@keyframes runAcross {
  from { transform: translateX(-200px); }
  to { transform: translateX(calc(100vw + 200px)); }
}

/* ...（既存のCSSコードはそのまま）... */

#runningHorse {
  position: absolute;
  top: 400px;
  left: -200px;
  height: 50px;
  display: none;
  z-index: 1001;
  animation: runAcross 160s linear forwards;
  will-change: transform; /* アニメーションのパフォーマンス向上 */
}

#message {
  color: red !important;
  font-weight: bold;
  margin-top: 8px;
  min-height: 20px;
}

/* .final-message クラス単体のスタイル */
.final-message {
  font-weight: bold;
  color: red !important;
}

/* .final-message の直後の span 要素（所要時間） */
.final-message + span {
  color: black; /* または red !important */
}

<img id="resultImage" src="encourage.png" alt="がんばったね"
     style="display: none; width: 200px; position: fixed; top: 120px; left: 50%; transform: translateX(-50%); z-index: 20;">


.big-ok {
  width: 60px;
  height: 45px; /* ← 元の30pxの1.5倍に */
  font-size: 16px;
}


#resultImage {
  height: auto;
  display: none;
  z-index: 20
}


#problem {
  font-family: 'Courier New', monospace;
  white-space: pre;
  letter-spacing: 0;
  color: black !important; /* この行を追加 */
}

#inputField {
  /* ▼ 既存のスタイル（変更不要）▼ */
  width: 200px; 
  min-width: 100px;
  height: 1.5em;
  font-family: 'Courier New', monospace;
  font-size: 1.2em;
  overflow: visible;
  padding-left: 0;
  margin-left: 0;
  /* ▲ ここまで維持 ▲ */

  /* ▼ 新規追加/修正 ▼ */
  text-align: center !important;
  caret-color: black !important;
}

#inputField:focus {
  /* ▼ フォーカス時のスタイル（シンプルに統一）▼ */
  outline: 2px solid #4CAF50 !important;
  background-color: white !important;
}

.big-ok:active, .big-ok:focus {
  transform: scale(0.98);
  background-color: #4CAF50 !important;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px; /* 10px → 3pxに統一 */
  width: 180px;
  padding: 3px;
  justify-content: start;
}

.keypad button {
  font-size: 14px;
  padding: 5px 0; /* padding: 8px → 5px 0 に統一 */
}

.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 400px;
}

.close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

@keyframes runAcross {
  from { transform: translateX(-200px); }
  to { transform: translateX(calc(100vw + 200px)); }
}

/* ...（既存のCSSコードはそのまま）... */

#runningHorse {
  position: absolute;
  top: 400px;
  left: -200px;
  height: 50px;
  display: none;
  z-index: 1001;
  animation: runAcross 40s linear forwards;
  will-change: transform; /* アニメーションのパフォーマンス向上 */
}

#message {
  color: red !important;
  font-weight: bold;
  margin-top: 8px;
  min-height: 20px;
}

/* .final-message クラス単体のスタイル */
.final-message {
  font-weight: bold;
  color: red !important;
}

/* .final-message の直後の span 要素（所要時間） */
.final-message + span {
  color: black; /* または red !important */
}

<img id="resultImage" src="encourage.png" alt="がんばったね"
     style="display: none; width: 200px; position: fixed; top: 120px; left: 50%; transform: translateX(-50%); z-index: 20;">

#mainContent {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 1;
}

.encourage-image {
  position: absolute;
  top: 50%;
  right: 5%; /* 画面右端から5%の位置に */
  transform: translateY(-50%);
  width: 120px;
  height: auto;
  z-index: 1000;
}