*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #0d1117;
  --text:    #c9d1d9;
  --dim:     #6e7681;
  --accent:  #58a6ff;

  --green:  #1a7a1a;
  --green-lit: #39ff14;
  --red:    #7a1a1a;
  --red-lit: #ff2222;
  --yellow: #7a6a00;
  --yellow-lit: #ffe600;
  --blue:   #1a2a7a;
  --blue-lit: #1a8fff;

  --center: #1a1f26;
  --board-size: min(90vw, 90vh, 420px);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', Courier, monospace;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1.5rem;
}

#ui {
  text-align: center;
}

#ui h1 {
  font-size: 2rem;
  letter-spacing: 0.35em;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

#message {
  font-size: 0.85rem;
  color: var(--dim);
  margin-bottom: 0.3rem;
  min-height: 1.2em;
}

#score-label {
  font-size: 0.8rem;
  color: var(--dim);
}

#score-label span {
  color: var(--accent);
  font-weight: bold;
}

#board {
  width: var(--board-size);
  height: var(--board-size);
}

#quadrant-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

.btn {
  border: none;
  cursor: pointer;
  transition: filter 0.06s, transform 0.06s;
  outline: none;
}

#green  { background: var(--green);  border-radius: 100% 0 0 0; }
#red    { background: var(--red);    border-radius: 0 100% 0 0; }
#yellow { background: var(--yellow); border-radius: 0 0 0 100%; }
#blue   { background: var(--blue);   border-radius: 0 0 100% 0; }

.btn:hover {
  filter: brightness(1.35);
}

.btn.lit#green  { background: var(--green-lit);  box-shadow: 0 0 30px var(--green-lit); }
.btn.lit#red    { background: var(--red-lit);    box-shadow: 0 0 30px var(--red-lit); }
.btn.lit#yellow { background: var(--yellow-lit); box-shadow: 0 0 30px var(--yellow-lit); }
.btn.lit#blue   { background: var(--blue-lit);   box-shadow: 0 0 30px var(--blue-lit); }

.btn.active {
  transform: scale(0.96);
  filter: brightness(1.6);
}

#center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
  background: var(--center);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px var(--bg);
  z-index: 10;
}

#start-btn {
  background: none;
  border: 1px solid var(--dim);
  border-radius: 50%;
  color: var(--text);
  font-family: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  width: 100%;
  height: 100%;
  transition: border-color 0.15s, color 0.15s;
}

#start-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.blocked {
  pointer-events: none;
}