body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 18px;
  background:
    radial-gradient(circle at 82% -10%, rgba(255, 242, 186, 0.7), transparent 30%),
    linear-gradient(180deg, #f5fae9 0%, #e6f1d6 48%, #d3e4c4 100%);
  color: #33402a;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

#canvasWrap {
  position: relative;
  width: min(920px, 94vw);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 22px 60px rgba(56, 92, 40, 0.30),
    0 4px 14px rgba(56, 92, 40, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #dbeff7;
  border-radius: 14px;
  cursor: crosshair;
}

#overlay {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  text-align: center;
  color: #fdfbf4;
  background: rgba(38, 58, 38, 0.85);
  border-radius: 14px;
  padding: 24px;
  backdrop-filter: blur(6px);
}

#overlay h1 {
  margin: 0 0 10px;
  font-size: clamp(20px, 4vw, 28px);
  color: #fffdf2;
}

#overlay .small {
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.95;
}

#overlay .hint {
  margin-top: 12px;
  font-size: 13px;
  opacity: 0.9;
}

.hud {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 14px;
  flex-wrap: wrap;
  color: #3a4a30;
}

.hud span {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(92, 132, 76, 0.4);
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.controls {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.8;
  max-width: 820px;
  text-align: left;
  color: #404e36;
}

.controls b {
  color: #2e3b24;
}

#settingsBtn {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(92, 132, 76, 0.5);
  background: rgba(255, 255, 255, 0.55);
  color: #3a4a30;
  font-size: 13px;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#settingsBtn:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(92, 132, 76, 0.7);
}

#settingsBtn:focus-visible {
  outline: 2px solid #b98612;
  outline-offset: 2px;
}

#settingsOverlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  background: rgba(40, 58, 38, 0.45);
  backdrop-filter: blur(4px);
}

#settingsCard {
  width: min(380px, 92vw);
  background: rgba(255, 254, 246, 0.97);
  border: 1px solid rgba(112, 144, 92, 0.45);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(40, 60, 30, 0.35);
  color: #33402a;
  font-family: inherit;
  padding: 10px;
}

.settings-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 4px;
}

.settings-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2e3b24;
}

#settingsClose {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(112, 144, 92, 0.5);
  background: rgba(255, 255, 255, 0.45);
  color: #44523a;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

#settingsClose:hover {
  background: rgba(112, 144, 92, 0.18);
}

.settings-sub {
  margin: 0 0 14px;
  font-size: 13px;
  color: #66744f;
}

.volume-row {
  display: grid;
  grid-template-columns: 64px 1fr 46px;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.volume-name {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #44523a;
  opacity: 0.9;
  text-align: left;
}

.volume-row input[type='range'] {
  width: 100%;
  accent-color: #d9a527;
  cursor: pointer;
}

.volume-pct {
  width: 46px;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #3a4a30;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.settings-actions button {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(112, 144, 92, 0.45);
  background: rgba(255, 255, 255, 0.55);
  color: #33402a;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.settings-actions button:hover {
  background: rgba(255, 255, 255, 0.85);
}

.settings-actions button.primary {
  background: #d9a527;
  border-color: #b98612;
  color: #33230a;
}