:root {
  --g-birdsong-sky-top: #9fc6f0;
  --g-birdsong-sky-mid: #f7c6d6;
  --g-birdsong-sky-bottom: #ffe6b8;
  --g-birdsong-sun: #fff2c2;
  --g-birdsong-cloud: rgba(255, 255, 255, 0.85);
  --g-birdsong-hill-far: #b9d8b0;
  --g-birdsong-hill: #93c77e;
  --g-birdsong-meadow: #7fbd68;
  --g-birdsong-bark: #8a5a36;
  --g-birdsong-bark-dark: #5e3b22;
  --g-birdsong-bark-light: #b07a4d;
  --g-birdsong-leaf: #6fbf58;
  --g-birdsong-leaf-dark: #3f8a3a;
  --g-birdsong-blossom: #ffc4dc;
  --g-birdsong-blossom-mid: #ff8fb8;
  --g-birdsong-chip: rgba(255, 250, 242, 0.92);
  --g-birdsong-chip-ink: #4a3348;
  --g-birdsong-bird-r: 34px;
  --g-birdsong-chip-fs: 15px;
  --g-birdsong-float-fs: 20px;
  --g-birdsong-btn: 52px;
  --g-birdsong-btn-icon: 22px;
  --g-birdsong-sr: 1px;
  --g-birdsong-banner-fs: 21px;
  --g-birdsong-banner-sub: 15px;
  --g-birdsong-banner-w: 320px;
}

:root.is-dark {
  --g-birdsong-sky-top: #1e2350;
  --g-birdsong-sky-mid: #4b3a72;
  --g-birdsong-sky-bottom: #a3627a;
  --g-birdsong-sun: #ffe0c2;
  --g-birdsong-cloud: rgba(210, 200, 240, 0.4);
  --g-birdsong-hill-far: #3d4a6e;
  --g-birdsong-hill: #2f5a4a;
  --g-birdsong-meadow: #2a4d3c;
  --g-birdsong-bark: #6a452b;
  --g-birdsong-bark-dark: #3e2818;
  --g-birdsong-bark-light: #8a5f3c;
  --g-birdsong-leaf: #4f9a45;
  --g-birdsong-leaf-dark: #2d6430;
  --g-birdsong-chip: rgba(36, 28, 60, 0.9);
  --g-birdsong-chip-ink: #f6eefc;
}

#game-dom .g-birdsong-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#game-dom .g-birdsong-bird {
  position: absolute;
  pointer-events: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#game-dom .g-birdsong-bird:focus {
  outline: none;
}

#game-dom .g-birdsong-bird:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

#game-dom .g-birdsong-replay {
  position: absolute;
  left: 50%;
  bottom: var(--gap-l);
  transform: translateX(-50%);
  pointer-events: auto;
  min-height: var(--g-birdsong-btn);
  padding: 0 var(--gap-m);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--hud-glass);
  box-shadow: var(--clay);
  color: var(--ink);
  font: inherit;
  font-weight: var(--fw-x);
  cursor: pointer;
  touch-action: manipulation;
}

#game-dom .g-birdsong-replay svg {
  width: var(--g-birdsong-btn-icon);
  height: var(--g-birdsong-btn-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#game-dom .g-birdsong-replay:disabled {
  opacity: 0.45;
  cursor: default;
}

#game-dom .g-birdsong-sr {
  position: absolute;
  width: var(--g-birdsong-sr);
  height: var(--g-birdsong-sr);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}
