#challenge-dialog {
  width:min(670px,calc(100% - 28px));
  border:3px solid #263d42;
  background:#e8d7a7;color:#1d343a;
}
.neon-console {
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);align-items:center;
  gap:20px;padding:43px 24px 26px;
  background:repeating-linear-gradient(0deg,#f6e8c808 0 3px,#8f704d15 3px 4px),#eee2bf;
}
.neon-controls,.neon-deck {min-width:0}
.neon-title-line,.neon-actions,.neon-display,.neon-key-help,.neon-score span {display:flex;align-items:center}
.neon-title-line {gap:10px}
.neon-title-line h2 {
  font:900 clamp(26px,4vw,37px)/1.14 "STSong","SimSun","Songti SC",serif;letter-spacing:-.03em;
  margin:0;color:#1c363c;
}
.neon-sound {
  display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;
  border:1.5px solid #30432f;background:#ead8a0;color:#263b38;cursor:pointer;
}
.neon-sound[aria-pressed="false"] .neon-wave,.neon-sound[aria-pressed="true"] .neon-mute {display:none}
.neon-sound[aria-pressed="true"] {background:#adc5ac}
.neon-rules {margin:8px 0 12px;color:#45483d;font-size:13px;line-height:1.65}
.neon-score {color:#545247;font:600 12px/1.4 monospace,sans-serif}
.neon-score span {gap:6px}
.neon-score strong {font:700 23px/1.2 Consolas,monospace;color:#233830}
.neon-display {
  gap:8px;min-height:34px;margin:13px 0;padding:7px 10px;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#0003 2px 3px),#233a35;
  border:1px solid #1c302f;box-shadow:inset 0 1px 3px #151e14;color:#ecdb98;
}
.neon-message {margin:0;font:600 12px/1.6 monospace,sans-serif}
.neon-lamp {width:6px;height:6px;border-radius:50%;background:#e0c96f;flex:none}
.neon-console[data-phase="lost"] .neon-display {background-color:#713523;color:#fff0c4}
.neon-console[data-phase="clear"] .neon-display,.neon-console[data-phase="won"] .neon-display {color:#ebf3c7}
.neon-actions {gap:10px;flex-wrap:wrap}
.neon-start,.neon-reset {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:6px 12px;min-height:35px;
  background:#b44229;color:#fff7db;border:1.5px solid #743229;box-shadow:1px 2px 0 #78392c;
  font-family:inherit;font-size:13px;line-height:1.4;font-weight:700;cursor:pointer;
}
.neon-start::before {content:"";border:4px solid transparent;border-right:0;border-left:6px solid currentColor}
.neon-start:hover {background:#9d3925}
.neon-reset {padding-inline:4px;color:#253a38;border:0;background:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:3px}
.neon-reset[hidden] {display:none}
.neon-deck {padding:10px 10px 8px;border:2px solid #102b35;border-radius:11px;background:#2f4850;box-shadow:3px 4px 0 #162a32}
.neon-pads {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:5px}
.neon-pad {
  touch-action:manipulation;user-select:none;cursor:pointer;min-width:0;
  padding:0 0 4px;border:1.5px solid #142d31;border-radius:5px;background:var(--key-base);
  box-shadow:1px 3px 0 #192f31;color:#203435;
}
.neon-pad-0 {--key-base:#956c29;--key-top:#e8b446;--key-on:#ffe481}
.neon-pad-1 {--key-base:#58716e;--key-top:#9cb5a2;--key-on:#cef3ba}
.neon-pad-2 {--key-base:#a25c3f;--key-top:#d9936f;--key-on:#ffba97}
.neon-pad-3 {--key-base:#647983;--key-top:#a6b9bf;--key-on:#e8faff}
.neon-face {
  display:grid;place-items:center;position:relative;min-height:62px;border-radius:3px;
  border:2px solid;border-color:#ffffff68 #ffffff26 #0003 #ffffff33;background:var(--key-top);
}
.neon-shape {font:800 27px/1 Consolas,monospace}
.neon-number {position:absolute;top:4px;left:5px;font:700 11px/1 monospace}
.neon-key-help {justify-content:center;gap:6px;color:#f6e6c2;margin:8px 0 0;font:600 11px/1.5 monospace,sans-serif}
.neon-pad[aria-disabled="true"] {cursor:default}
.neon-console[data-phase="input"] .neon-pad:hover {outline:1px solid #f8db94;outline-offset:2px}
.neon-pad.neon-lit {outline:3px solid var(--key-on);outline-offset:1px}
.neon-pad.neon-lit .neon-face {background:var(--key-on);transform:translateY(3px)}
@media (max-width:550px) {
  .neon-console {grid-template-columns:1fr;padding:38px 16px 16px;gap:15px}
  .neon-pads {grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:2px}
  .neon-face {min-height:53px}
  .neon-shape {font-size:22px}
  .neon-display {margin:9px 0}
}
@media(prefers-reduced-motion:reduce){.neon-pad.neon-lit .neon-face{transform:none}}