:root {
  --g-peaks-moss: #6ea659;
  --g-peaks-moss-2: #5d954d;
  --g-peaks-moss-3: #8cc06c;
  --g-peaks-moss-dark: #3d6c39;
  --g-peaks-rim: #8a5a36;
  --g-peaks-rim-dark: #573720;
  --g-peaks-rim-light: #b88252;
  --g-peaks-dapple: rgba(255, 246, 200, 0.22);
  --g-peaks-sky: #f4efc8;
  --g-peaks-sky-2: #cfe6b0;
  --g-peaks-ray: rgba(255, 248, 210, 0.2);
  --g-peaks-spruce: #3f7a46;
  --g-peaks-spruce-2: #2f6338;
  --g-peaks-stump: #d3a571;
  --g-peaks-stump-ring: #b07f50;
  --g-peaks-stump-bark: #6b4429;
  --g-peaks-face: #fdf7e8;
  --g-peaks-face-2: #f2e4c4;
  --g-peaks-face-edge: #cdb486;
  --g-peaks-ink: #3a2a1e;
  --g-peaks-back: #2f7048;
  --g-peaks-back-2: #22543a;
  --g-peaks-back-trim: #e8c46a;
  --g-peaks-leaf: #3f9a4a;
  --g-peaks-leaf-dark: #23662e;
  --g-peaks-acorn: #c27632;
  --g-peaks-acorn-dark: #7a4519;
  --g-peaks-flower: #db4a80;
  --g-peaks-flower-dark: #9a2a58;
  --g-peaks-feather: #3f7fd6;
  --g-peaks-feather-dark: #24539a;
  --g-peaks-gold: #f3c544;
  --g-peaks-gold-2: #fff3b8;
  --g-peaks-gold-dark: #b4801a;
  --g-peaks-sun: #ffb22e;
  --g-peaks-sun-2: #ffe680;
  --g-peaks-sun-ray: #ff8a2a;
  --g-peaks-frost: rgba(206, 236, 255, 0.78);
  --g-peaks-frost-line: #ffffff;
  --g-peaks-frost-ink: #2a6aa0;
  --g-peaks-stem: #6a4430;
  --g-peaks-thorn: #3a2418;
  --g-peaks-bramble-leaf: #4f8a3e;
  --g-peaks-berry: #b5304d;
  --g-peaks-vine: #3d7a39;
  --g-peaks-vine-leaf: #64b04e;
  --g-peaks-vine-leaf-2: #93d46b;
  --g-peaks-bud: #ff9ec4;
  --g-peaks-eye: #6fc3ff;
  --g-peaks-tag: #fff4dc;
  --g-peaks-tag-ink: #4a3320;
  --g-peaks-hog: #a7774e;
  --g-peaks-hog-dark: #67462c;
  --g-peaks-hog-face: #f3d6ac;
  --g-peaks-nose: #2a1d15;
  --g-peaks-glow: #fff3a0;
  --g-peaks-ring: #ffffff;
  --g-peaks-mote: #fffbe0;
  --g-peaks-mush: #f6ecd8;
  --g-peaks-mush-cap: #e2574c;
  --g-peaks-fern: #3f8a44;
  --g-peaks-chip: rgba(255, 250, 240, 0.95);
  --g-peaks-chip-ink: #3f3022;
  --g-peaks-gold-ink: rgba(122, 72, 10, 0.85);
  --g-peaks-hurt: #e8645a;
  --g-peaks-cue: #fffdf5;
  --g-peaks-shadow: rgba(30, 45, 20, 0.34);
  --g-peaks-side: 3;
  --g-peaks-gap: -2;
  --g-peaks-card-max: 52;
  --g-peaks-ratio: 1.5;
  --g-peaks-row: 0.64;
  --g-peaks-top: 14;
  --g-peaks-big: 2.2;
  --g-peaks-sky-k: 0.42;
  --g-peaks-mid-k: 0.24;
  --g-peaks-reach: 0.95;
  --g-peaks-reach-y: 0.8;
  --g-peaks-toast-t: 1.3;
  --g-peaks-tray-gap: 16;
  --g-peaks-vine-gap: 20;
  --g-peaks-vine-h: 46;
  --g-peaks-foot: 34;
  --g-peaks-radius: 0.14;
  --g-peaks-idx: 0.44;
  --g-peaks-flip-t: 0.26;
  --g-peaks-fly-t: 0.34;
  --g-peaks-arc: 64;
  --g-peaks-spin: 0.55;
  --g-peaks-stagger: 0.022;
  --g-peaks-land-t: 0.24;
  --g-peaks-wig-t: 0.36;
  --g-peaks-hit: 5;
  --g-peaks-nodes: 12;
  --g-peaks-motes: 12;
  --g-peaks-float-fs: 16px;
  --g-peaks-chip-fs: 14px;
  --g-peaks-banner-fs: 22px;
  --g-peaks-banner-sub: 15px;
  --g-peaks-banner-w: 300px;
  --g-peaks-run-fs: 21px;
  --g-peaks-tip-time: 7;
  --g-peaks-tip-fade: 0.35;
  --g-peaks-note-time: 2.2;
  --g-peaks-end-hold: 1.4;
  --g-peaks-cue-period: 1.5;
  --g-peaks-shine-t: 2.6;
  --g-peaks-cascade-t: 0.07;
  --g-peaks-cut-t: 0.6;
  --g-peaks-glow-t: 1.2;
  --g-peaks-pop-t: 0.25;
  --g-peaks-hop-t: 0.45;
  --g-peaks-cheer-t: 1.2;
  --g-peaks-fall-t: 0.7;
  --g-peaks-pill-h: 20;
  --g-peaks-pill-fs: 13;
  --g-peaks-pad-h: 72;
  --g-peaks-pad-g: 8;
  --g-peaks-mech-img: 76;
  --g-peaks-mech-w: 300px;
  --g-peaks-btn: 48px;
  --g-peaks-gap-btn: 8px;
  --g-peaks-inset: 10px;
  --g-peaks-icon: 24px;
  --g-peaks-btn-bg: rgba(255, 250, 240, 0.9);
  --g-peaks-btn-ink: #3d6b33;
  --g-peaks-btn-shadow: 0 2px 8px rgba(30, 60, 25, 0.3);
}

:root.is-dark {
  --g-peaks-moss: #2c5a36;
  --g-peaks-moss-2: #244c2e;
  --g-peaks-moss-3: #3a6d42;
  --g-peaks-moss-dark: #15301c;
  --g-peaks-rim: #5e3d27;
  --g-peaks-rim-dark: #34210f;
  --g-peaks-rim-light: #84593a;
  --g-peaks-dapple: rgba(170, 210, 255, 0.12);
  --g-peaks-sky: #0f1f2c;
  --g-peaks-sky-2: #1c3a32;
  --g-peaks-ray: rgba(150, 200, 255, 0.07);
  --g-peaks-spruce: #1e4a2c;
  --g-peaks-spruce-2: #143822;
  --g-peaks-stump: #8a6440;
  --g-peaks-stump-ring: #6c4b2e;
  --g-peaks-stump-bark: #3f2817;
  --g-peaks-face: #f4ecd8;
  --g-peaks-face-2: #e2d2ae;
  --g-peaks-face-edge: #a98e5e;
  --g-peaks-back: #23593a;
  --g-peaks-back-2: #173f29;
  --g-peaks-mote: #e6ff8a;
  --g-peaks-mush: #d9ccb2;
  --g-peaks-mush-cap: #b8433a;
  --g-peaks-fern: #2d6a37;
  --g-peaks-chip: rgba(30, 40, 34, 0.94);
  --g-peaks-chip-ink: #f3efe2;
  --g-peaks-cue: #fffbe8;
  --g-peaks-shadow: rgba(0, 0, 0, 0.45);
  --g-peaks-btn-bg: rgba(30, 40, 34, 0.86);
  --g-peaks-btn-ink: #c9f0b0;
  --g-peaks-btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

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

#game-dom .g-peaks-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--g-peaks-inset);
  display: flex;
  justify-content: center;
  gap: max(var(--g-peaks-gap-btn), var(--target-gap));
  pointer-events: none;
}

#game-dom .g-peaks-btn {
  width: max(var(--g-peaks-btn), var(--target));
  height: max(var(--g-peaks-btn), var(--target));
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--g-peaks-btn-bg);
  color: var(--g-peaks-btn-ink);
  box-shadow: var(--g-peaks-btn-shadow);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

#game-dom .g-peaks-btn:active {
  scale: var(--press);
}

#game-dom .g-peaks-btn:disabled {
  opacity: 0.45;
}

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

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

#game-dom .g-peaks-mech {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 2 * var(--gap-m)), var(--g-peaks-mech-w));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--gap-m);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--clay), var(--shadow-sheet);
  text-align: center;
  animation: fade var(--t-med) var(--ease);
}

#game-dom .g-peaks-mech img {
  width: calc(var(--g-peaks-mech-img) * 1px);
  height: calc(var(--g-peaks-mech-img) * 1.42px);
}

#game-dom .g-peaks-mech b {
  font-size: var(--fs-m);
  font-weight: var(--fw-x);
}

#game-dom .g-peaks-mech p {
  margin: 0 0 var(--gap-xs);
  font-size: var(--fs-s);
  color: var(--ink-soft);
}

#game-dom .g-peaks-mech .btn {
  width: 100%;
}

:root.reduce-motion #game-dom .g-peaks-mech {
  animation: none;
}