.reaction-wrap{
  max-width:560px;
}

.reaction-box{
  margin:40px auto 0;
  width:100%;
  max-width:420px;
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  cursor:pointer;
  user-select:none;
  font-family:'Orbitron',sans-serif;
  font-size:18px;
  letter-spacing:.1em;
  color:#fff;
  text-align:center;
  padding:20px;
  background:rgba(63,242,255,0.1);
  border:1px solid rgba(63,242,255,0.35);
  box-shadow:0 0 24px rgba(63,242,255,0.2);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.reaction-box.waiting{
  background:rgba(255,95,126,0.14);
  border-color:var(--danger);
  box-shadow:0 0 24px rgba(255,95,126,0.25);
}
.reaction-box.ready{
  background:rgba(77,255,160,0.22);
  border-color:var(--success);
  box-shadow:0 0 32px rgba(77,255,160,0.45);
}
.reaction-box.early{
  background:rgba(255,210,63,0.18);
  border-color:var(--warn);
  box-shadow:0 0 24px rgba(255,210,63,0.3);
}
.reaction-box.result{
  background:rgba(63,242,255,0.16);
  border-color:var(--cyan);
}

.results{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.result-chip{
  padding:6px 14px;
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  letter-spacing:.05em;
  color:var(--cyan);
  border:1px solid rgba(63,242,255,0.35);
  border-radius:2px;
  background:rgba(63,242,255,0.06);
}

.restart-btn{
  display:none;
  margin:34px auto 0;
}
.restart-btn.show{display:inline-flex;}