h1 { color: #9c27b0; margin-bottom: 10px; }

.game-area {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}

canvas { border: 2px solid #9c27b033; }

.side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 120px;
}

.box {
  background: #111127;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.box label {
  font-size: 0.7rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.box b {
  display: block;
  font-size: 1.5rem;
  margin-top: 4px;
}

#nextCanvas { border-radius: 8px; display: block; margin: 0 auto; }

button { background: #9c27b0; color: #fff; width: 100%; }
button:hover { background: #ab47bc; }

.full-overlay .obox { border: 1px solid #9c27b0; }
.full-overlay .obox h2 { color: #9c27b0; }
.full-overlay .obox button { background: #9c27b0; width: auto; }

.hint { margin-top: 10px; }

@media (max-width: 480px) {
  .side { width: 90px; gap: 10px; }
  .box b { font-size: 1.2rem; }
  .game-area { gap: 12px; }
}