:root {
  --g-pinecone-sky-top: #8fcdf2;
  --g-pinecone-sky-bottom: #e6f6ee;
  --g-pinecone-sun: #fff4c8;
  --g-pinecone-hill-far: #bfe0b4;
  --g-pinecone-hill: #96cc84;
  --g-pinecone-grass: #6fb556;
  --g-pinecone-grass-dark: #4d8f3f;
  --g-pinecone-grass-light: #94d06e;
  --g-pinecone-bark: #7d5134;
  --g-pinecone-bark-dark: #4f3220;
  --g-pinecone-bark-light: #a8714a;
  --g-pinecone-crown: #4f9d57;
  --g-pinecone-crown-dark: #2f7040;
  --g-pinecone-crown-light: #86c66b;
  --g-pinecone-stump: #a3714a;
  --g-pinecone-stump-top: #e7c595;
  --g-pinecone-fur: #d9773a;
  --g-pinecone-fur-dark: #8e4520;
  --g-pinecone-fur-light: #f2a565;
  --g-pinecone-belly: #fbe3c4;
  --g-pinecone-cone: #9b6235;
  --g-pinecone-cone-dark: #5b3519;
  --g-pinecone-cone-light: #c98d55;
  --g-pinecone-basket: #d39a5c;
  --g-pinecone-basket-dark: #8f5c2e;
  --g-pinecone-basket-light: #f1c88e;
  --g-pinecone-nest: #6d4a2a;
  --g-pinecone-nest-dark: #8a6239;
  --g-pinecone-nest-light: #c2955f;
  --g-pinecone-egg: #fff3c9;
  --g-pinecone-aim: #ffffff;
  --g-pinecone-aim-dim: #2b3a4a;
  --g-pinecone-wind: #2f7fc0;
  --g-pinecone-badge: rgba(255, 250, 242, 0.92);
  --g-pinecone-badge-ink: #6b4a2a;
  --g-pinecone-gold: #ffd04a;
  --g-pinecone-gold-ink: rgba(122, 72, 10, 0.85);
  --g-pinecone-chip: rgba(255, 250, 242, 0.92);
  --g-pinecone-chip-ink: #4a3348;
  --g-pinecone-hurt: #ff6b6b;
  --g-pinecone-float-fs: 20px;
  --g-pinecone-chip-fs: 14px;
  --g-pinecone-badge-fs: 12px;
  --g-pinecone-banner-fs: 21px;
  --g-pinecone-banner-sub: 15px;
  --g-pinecone-banner-w: 320px;
  --g-pinecone-tip-time: 5;
  --g-pinecone-end-hold: 1.6;
  --g-pinecone-pull: 150;
  --g-pinecone-btn: 42px;
  --g-pinecone-gap: 6px;
  --g-pinecone-inset: 10px;
  --g-pinecone-bar-bg: rgba(255, 250, 242, 0.8);
  --g-pinecone-bar-ink: #5b3519;
  --g-pinecone-bar-shadow: 0 2px 10px rgba(74, 51, 72, 0.18);
  --g-pinecone-sr: 1px;
}

:root.is-dark {
  --g-pinecone-sky-top: #1b2450;
  --g-pinecone-sky-bottom: #4a4c7c;
  --g-pinecone-sun: #ffe0b0;
  --g-pinecone-hill-far: #384a6c;
  --g-pinecone-hill: #2f5550;
  --g-pinecone-grass: #2f6038;
  --g-pinecone-grass-dark: #214528;
  --g-pinecone-grass-light: #477d4a;
  --g-pinecone-bark: #5e3e28;
  --g-pinecone-bark-dark: #36231a;
  --g-pinecone-bark-light: #7d5638;
  --g-pinecone-crown: #2f6a40;
  --g-pinecone-crown-dark: #1d4a2c;
  --g-pinecone-crown-light: #4f8e55;
  --g-pinecone-stump: #7a5638;
  --g-pinecone-stump-top: #b8956a;
  --g-pinecone-aim: #fff4d6;
  --g-pinecone-aim-dim: #0e1430;
  --g-pinecone-wind: #9fd3ff;
  --g-pinecone-badge: rgba(36, 28, 60, 0.88);
  --g-pinecone-badge-ink: #ffe7c2;
  --g-pinecone-chip: rgba(36, 28, 60, 0.9);
  --g-pinecone-chip-ink: #f6eefc;
  --g-pinecone-bar-bg: rgba(36, 28, 60, 0.78);
  --g-pinecone-bar-ink: #ffe7c2;
  --g-pinecone-bar-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

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

#game-dom .g-pinecone-bar {
  position: absolute;
  left: 50%;
  bottom: var(--g-pinecone-inset);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: max(var(--g-pinecone-gap), var(--target-gap));
  padding: var(--g-pinecone-gap);
  border-radius: var(--r-pill);
  background: var(--g-pinecone-bar-bg);
  box-shadow: var(--g-pinecone-bar-shadow);
  pointer-events: auto;
}

#game-dom .g-pinecone-btn {
  width: var(--g-pinecone-btn);
  height: var(--g-pinecone-btn);
  min-width: var(--target);
  min-height: var(--target);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--g-pinecone-bar-ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#game-dom .g-pinecone-btn:active,
#game-dom .g-pinecone-throw:active {
  transform: scale(var(--press));
}

#game-dom .g-pinecone-throw {
  min-height: var(--target);
  white-space: nowrap;
}

#game-dom .g-pinecone-throw[aria-disabled='true'] {
  opacity: 0.55;
}

#game-dom .g-pinecone-btn:focus {
  outline: none;
}

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

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