:root {
  --bg: #080a0f;
  --surface: #11151f;
  --accent: #6c42ff;
  --text: #e6eaf0;
  --muted: #7a8499;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; width: 100%; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden; -webkit-tap-highlight-color: transparent;
}
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ui {
  position: fixed; top: 24px; left: 24px; z-index: 10;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  background: rgba(17,21,31,0.65); backdrop-filter: blur(12px);
  padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.06);
}
.toggle {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  font-size: 15px; font-weight: 500; letter-spacing: 0.3px; user-select: none; outline: none;
}
.toggle:focus-visible .slider { box-shadow: 0 0 0 3px rgba(108,66,255,0.5); }
.slider {
  position: relative; width: 46px; height: 26px; background: #252a38;
  border-radius: 13px; transition: background 0.25s ease, box-shadow 0.2s ease;
}
.slider::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
input:checked + .slider { background: var(--accent); }
input:checked + .slider::after { transform: translateX(20px); }
.hint { color: var(--muted); font-size: 13px; line-height: 1.4; max-width: 140px; }

#pauseOverlay {
  position: fixed; inset: 0; background: rgba(8,10,15,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  z-index: 30; backdrop-filter: blur(6px); transition: opacity 0.2s;
}
#pauseOverlay.hidden { opacity: 0; pointer-events: none; }
#pauseOverlay span { font-size: 26px; font-weight: 700; letter-spacing: 1.5px; }
#resumeBtn {
  padding: 12px 28px; background: var(--accent); color: #fff; border: none;
  border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform 0.1s, background 0.2s, box-shadow 0.2s;
}
#resumeBtn:hover { background: #5a35d6; box-shadow: 0 4px 16px rgba(108,66,255,0.35); }
#resumeBtn:active { transform: scale(0.96); }

.degraded canvas { filter: contrast(1.15) saturate(0.9); }
.degraded::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.25) 2px, rgba(0,0,0,0.25) 4px);
}
.degraded .ui { background: rgba(17,21,31,0.5); border-color: rgba(255,42,92,0.2); }