.game-area {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.box-wrap { padding: 10px 0; }

.box {
  position: relative;
  width: 180px;
  height: 180px;
  background: #333;
  border-radius: 10px;
  border: 2px solid #111;
}
.box.shaking { animation: shake 0.25s ease; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-4px, 2px); }
  50% { transform: translate(4px, -2px); }
  75% { transform: translate(-3px, -3px); }
}

.win {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #444;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 14px;
  font-weight: bold;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.win-a { top: 10px; left: 10px; }
.win-b { top: 10px; right: 10px; }
.win-c { bottom: 10px; left: 10px; }
.win-d { bottom: 10px; right: 10px; }
.win.lit {
  background: #ffdd66;
  color: #332600;
  box-shadow: 0 0 16px 4px rgba(255, 221, 102, 0.7);
}

.shake-row {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 260px;
}
.shake-row button { flex: 1; }

.candidates-label { font-size: 12px; color: #666; margin-top: 6px; }

.candidates-row {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 260px;
}

.candidate {
  flex: 1;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  background: #fafafa;
  text-align: center;
}
.candidate.selected { border-color: #222; background: #eee; }
.candidate svg { width: 100%; height: 60px; }
.candidate .cand-label { font-size: 11px; color: #666; }