body {
  background: #0F172A;
  color: #F8FAFC;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align:center;
  margin:0;
}

.logo {
  max-width:160px;
  margin:20px auto;
  display:block;
}

h1 {
  font-size:28px;
  margin-bottom:8px;
  font-weight:800;
}

h3 {
  margin-top:14px;
  font-weight:600;
  opacity:0.9;
}

button {
  padding:14px 24px;
  margin:8px;
  background:#F5CA51;
  color:#0F172A;
  border:none;
  border-radius:14px;
  font-size:16px;
  font-weight:700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: transform .08s ease, filter .08s ease;
}

button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.startBtn {
  font-size:20px;
  margin-top:18px;
}

.hidden {
  display:none;
}

#modules label {
  display:block;
  margin:6px;
  font-size:16px;
  cursor:pointer;
}

#code {
  font-size:clamp(42px, 8vw, 120px);
  font-weight:800;
  margin-top:40px;
  line-height:1.15;
}

#timer {
  font-size:20px;
  margin-top:10px;
  opacity:0.9;
}

.flash-good {
  background:#16A34A !important;
}

.flash-bad {
  background:#DC2626 !important;
}

#hint {
  font-size:clamp(26px, 5vw, 42px);
  padding:40px;
  color:#F5CA51;
  font-weight:700;
}
.topbar {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.backBtn {
  display: inline-block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  background: #F5CA51;
  text-decoration: none;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  transition: transform .1s ease, filter .15s ease;
}

.backBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}