:root {
  --on: #ffd000;
  --off: #2b2b2b;
  --accent: #4a90e2;
  --bg: #0f1115;
  --text: #e6e6e6;
  --size: min(78vmin, 560px);
  --r: calc(var(--size) / 2 - 36px);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -10%, #1b2030, #0f1115);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container { width: 100%; max-width: 900px; padding: 20px 16px 8px; }
h1 { font-size: clamp(20px, 2.4vw, 28px); margin: 0 0 8px; font-weight: 700; }
.hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.info { display: flex; gap: 12px; align-items: center; }
.controls { display: flex; gap: 10px; }
button { border: 1px solid #3a3f55; background: #151823; color: var(--text); border-radius: 10px; padding: 8px 12px; cursor: pointer; transition: 0.2s ease; }
button:hover { background: #1b2030; border-color: #556087; }
button:disabled { opacity: 0.6; cursor: not-allowed; }

.board { position: relative; width: var(--size); height: var(--size); margin: 14px auto; border-radius: 50%; display: grid; place-items: center; }
.ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 50px rgba(255, 207, 0, .05), 0 0 80px rgba(0,0,0,.4); }
.center-controls {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 2;
  background: rgba(15, 17, 21, 0.55);
  border: 1px solid #30364d;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 20px rgba(255,255,255,.03);
  padding: 12px 14px; border-radius: 12px;
}

.center-buttons { display: flex; gap: 10px; }
.center-hud { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; opacity: .9; text-align: center; }
.mode-switch { display: flex; gap: 12px; font-size: 12px; opacity: .9; }
.mode-switch input { transform: translateY(1px); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.badge-normal { background: rgba(139, 233, 139, 0.12); border-color: rgba(139, 233, 139, 0.35); color: #8be98b; }
.badge-challenge { background: rgba(255, 208, 0, 0.12); border-color: rgba(255, 208, 0, 0.35); color: #ffd000; }
.center-hint { display: grid; place-items: center; gap: 6px; }
.hint-toggle { font-size: 12px; opacity: .9; }
.hint { font-size: 12px; opacity: .8; text-align: center; max-width: 260px; }

.light {
  position: absolute;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid #23283b;
  display: grid; place-items: center;
  color: #091018; font-weight: 700;
  user-select: none; outline: none;
  transition: transform .12s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
  transform: rotate(calc(var(--i) * 30deg)) translate(var(--r)) rotate(calc(var(--i) * -30deg));
  background: var(--off);
  box-shadow: 0 6px 18px rgba(0,0,0,.6), inset 0 -8px 16px rgba(0,0,0,.6), inset 0 8px 12px rgba(255,255,255,.05);
}
.light.on {
  background: radial-gradient(30px 30px at 50% 40%, #fff6b0, #ffd000 60%, #e2a300 100%);
  border-color: #a97900;
  box-shadow: 0 0 24px rgba(255,208,0,.45), 0 12px 28px rgba(0,0,0,.5), inset 0 -8px 16px rgba(184,114,0,.6);
}
.light.masked {
  background: #1a1d29;
  border-color: #2b2f42;
  box-shadow: 0 6px 18px rgba(0,0,0,.6), inset 0 -8px 16px rgba(0,0,0,.6), inset 0 8px 12px rgba(255,255,255,.03);
}
.light.masked .light-label { opacity: 1; color: #cbd1e2; font-weight: 700; }
.light:active { transform: rotate(calc(var(--i) * 30deg)) translate(var(--r)) rotate(calc(var(--i) * -30deg)) scale(.97); }
.light-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; opacity: .7; pointer-events: none; }

.footer { opacity: .7; font-size: 12px; margin: 8px 0 20px; }

@media (max-width: 480px) {
  :root { --r: calc(var(--size) / 2 - 28px); }
  .light { width: 52px; height: 52px; }
}