:root {
  --bleu: #0000ff;
  --rouge: #ff0000;
  --green: #00ff00;
  --gris: rgb(128, 128, 128);
  --GrisGB: #ffffff1a;
  --blanc: #ffffff;
}


body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 00px;
  background-color: #072f5f;
}

#LogoASCII {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--blanc);
  font-family: "Space Mono", monospace;
  font-weight: 700;
  
  margin-bottom: 20px;
}

#game-container {
  display: flex;
  flex-direction: column; 
  align-items: center; 
  gap: 20px;
}

#reaction-time {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  text-align: center;
  min-height: 2em;
  font-size: 22px;
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
}

#reaction-time.result-success {
  color: #60ec73;
  text-shadow: 0 0 18px rgba(96, 236, 115, 0.45);
}

#reaction-time.result-early {
  color: #ecea60;
  text-shadow: 0 0 18px rgba(236, 234, 96, 0.45);
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

#reaction-time.show {
  animation: popIn 0.25s ease both;
}

.buttons-row {
  display: flex;
  gap: 15px;
}

/* --DÉBUT Texte Instructions-- */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#instructions {
  color: var(--blanc);
  font-family: "Space Mono", monospace;
  font-size: 13px;
  text-align: center;
  animation: fadeInUp 0.6s ease both;
  animation-delay: 0.3s;
  opacity: 0;
  animation-fill-mode: forwards;
}

#instructions p {
  margin: 4px 0;
}

.instructions-sub {
  font-style: italic;
  font-size: 11px;
  opacity: 0.5;
}

kbd {
  font-family: monospace;
  font-size: 13px;
  padding: 2px 7px;
  background: #2c2c2a;
  border-radius: 4px;
  color: #f1efe8;
  letter-spacing: 0.02em;
  opacity: 1
;
}

/* --FIN Texte Instructions-- */


/* --DÉBUT Action Buttons (Start, Stop, Restart)-- */

.start-btn,
.stop-btn,
.restart-btn {
  padding: 10px 20px;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}

.start-btn:hover,
.stop-btn:hover,
.restart-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.05);
}

.start-btn:active,
.stop-btn:active,
.restart-btn:active {
  transform: scale(0.97);
}

.start-btn:disabled,
.stop-btn:disabled,
.restart-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  transform: none;
}

/* --FIN Action Buttons-- */

#game-board {
  position: relative;
  width: 300px;
  height: 300px;
  background: var(--GrisGB);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 22px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 16px 3px rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

#game-board::before {
  content: '';
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
}

#game-board::after {
  content: '';
  position: relative;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    transparent,
    rgba(255, 255, 255, 0.1)
  );
}

span.fa-solid.fa-exclamation-triangle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 170px;
  color: #d8c946;
}

/* --DÉBUT Mode Selector-- */

#mode-selector {
  display: flex;
  gap: 10px;
}

.mode-btn {
  padding: 8px 18px;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}

.mode-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.05);
}

.mode-btn.active {
  color: #072f5f;
  background: #ffffff;
  border-color: #ffffff;
}

/* --FIN Mode Selector-- */