:root {
  --g-petalcatch-sky-top: #7cc6ee;
  --g-petalcatch-sky-mid: #c2e5f6;
  --g-petalcatch-sky-bottom: #ffe9f0;
  --g-petalcatch-sun: #fff3c9;
  --g-petalcatch-shaft: rgba(255, 247, 216, 0.5);
  --g-petalcatch-haze: rgba(255, 234, 243, 0.8);
  --g-petalcatch-cloud: #ffffff;
  --g-petalcatch-cloud-shade: #dce9f5;
  --g-petalcatch-cloud-a: 0.9;
  --g-petalcatch-dot-a: 0.8;
  --g-petalcatch-hill-far: #bcdcc8;
  --g-petalcatch-hill-far-tree: #f5c9da;
  --g-petalcatch-hill: #9fd18c;
  --g-petalcatch-hill-dark: #86c077;
  --g-petalcatch-hill-tree: #f1b8cd;
  --g-petalcatch-hill-tree-light: #fde3ec;
  --g-petalcatch-bush: #6db75c;
  --g-petalcatch-bush-dark: #4f9a45;
  --g-petalcatch-azalea: #ff94bb;
  --g-petalcatch-meadow: #9ad37a;
  --g-petalcatch-meadow-dark: #7fc166;
  --g-petalcatch-pool: rgba(255, 250, 216, 0.5);
  --g-petalcatch-grass: #4f9c42;
  --g-petalcatch-grass-light: #7cc35c;
  --g-petalcatch-grass-dark: #3d8235;
  --g-petalcatch-flower: #fff7c2;
  --g-petalcatch-bark: #8a5737;
  --g-petalcatch-bark-dark: #5a3822;
  --g-petalcatch-crown: #f6a3c1;
  --g-petalcatch-crown-light: #ffd6e5;
  --g-petalcatch-crown-dark: #e57fa6;
  --g-petalcatch-crown-deep: #c9628c;
  --g-petalcatch-petal: #f48ab2;
  --g-petalcatch-petal-light: #fff0f6;
  --g-petalcatch-petal-dark: #c24a7b;
  --g-petalcatch-blossom-center: #ffd45e;
  --g-petalcatch-stamen: #e0902a;
  --g-petalcatch-gold: #ffbf2e;
  --g-petalcatch-gold-light: #fff5bf;
  --g-petalcatch-gold-dark: #cf870c;
  --g-petalcatch-gold-glow: #ffe27a;
  --g-petalcatch-gold-ink: rgba(122, 72, 10, 0.85);
  --g-petalcatch-wasp: #ffc531;
  --g-petalcatch-wasp-stripe: #2f2622;
  --g-petalcatch-wasp-wing: #eaf6ff;
  --g-petalcatch-wasp-blush: #ff9e8a;
  --g-petalcatch-thorn: #8e3f37;
  --g-petalcatch-thorn-dark: #4f2420;
  --g-petalcatch-thorn-tip: #f1d2bd;
  --g-petalcatch-thorn-leaf: #4f9c42;
  --g-petalcatch-good-halo: rgba(255, 255, 255, 0.9);
  --g-petalcatch-bad-halo: rgba(120, 20, 30, 0.5);
  --g-petalcatch-edge: rgba(29, 20, 32, 0);
  --g-petalcatch-basket: #d39a5c;
  --g-petalcatch-basket-dark: #8f5c2e;
  --g-petalcatch-basket-light: #f4cf98;
  --g-petalcatch-basket-inside: #6b4527;
  --g-petalcatch-bow: #ff7fa8;
  --g-petalcatch-bow-dark: #d4547f;
  --g-petalcatch-combo: #ff8fb1;
  --g-petalcatch-combo-2: #ffa43b;
  --g-petalcatch-combo-3: #ffd23f;
  --g-petalcatch-combo-bg: rgba(255, 252, 246, 0.95);
  --g-petalcatch-combo-track: rgba(74, 51, 72, 0.14);
  --g-petalcatch-combo-ink: #4a3348;
  --g-petalcatch-toast-gold: #fff1bf;
  --g-petalcatch-toast-gold-ink: #7a4a0a;
  --g-petalcatch-toast-cool: #ddf3ff;
  --g-petalcatch-toast-cool-ink: #1f5a7a;
  --g-petalcatch-check: #3aa657;
  --g-petalcatch-cross: #e5484d;
  --g-petalcatch-mote: #ffc9dc;
  --g-petalcatch-veil: rgba(255, 255, 255, 0);
  --g-petalcatch-gust: #ffffff;
  --g-petalcatch-chip: rgba(255, 250, 242, 0.94);
  --g-petalcatch-chip-ink: #4a3348;
  --g-petalcatch-hurt: #ff5b5b;
  --g-petalcatch-dizzy: #ffd23f;
  --g-petalcatch-fence: #d9b98c;
  --g-petalcatch-fence-light: #f6e6c8;
  --g-petalcatch-fence-shade: rgba(122, 84, 46, 0.3);
  --g-petalcatch-bed-leaf: #4f9a45;
  --g-petalcatch-bed-a: #ff8fb1;
  --g-petalcatch-bed-b: #ffd45e;
  --g-petalcatch-bed-c: #c7a3f0;
  --g-petalcatch-cue: #fffdf5;
  --g-petalcatch-item-k: 1.5;
  --g-petalcatch-icon-r: 12;
  --g-petalcatch-halo: 0.42;
  --g-petalcatch-edge-w: 0;
  --g-petalcatch-basket-h: 0.66;
  --g-petalcatch-handle-h: 0.47;
  --g-petalcatch-rim-k: 0.11;
  --g-petalcatch-pile-n: 40;
  --g-petalcatch-crown-h: 0.14;
  --g-petalcatch-front-h: 0.075;
  --g-petalcatch-fence-lift: 24;
  --g-petalcatch-fence-h: 46;
  --g-petalcatch-fence-step: 26;
  --g-petalcatch-bed-gap: 16;
  --g-petalcatch-lane-gap: 10;
  --g-petalcatch-lane-row: 38;
  --g-petalcatch-lane-fs: 15px;
  --g-petalcatch-tip-y: 0.43;
  --g-petalcatch-combo-r: 18;
  --g-petalcatch-combo-fs: 14px;
  --g-petalcatch-combo-min: 3;
  --g-petalcatch-float-fs: 20px;
  --g-petalcatch-chip-fs: 14px;
  --g-petalcatch-banner-fs: 22px;
  --g-petalcatch-banner-sub: 15px;
  --g-petalcatch-banner-w: 300px;
  --g-petalcatch-banner-h: 96;
  --g-petalcatch-banner-y: 0.4;
  --g-petalcatch-squash: 0.14;
  --g-petalcatch-squash-t: 0.26;
  --g-petalcatch-tilt: 0.16;
  --g-petalcatch-tilt-v: 900;
  --g-petalcatch-tilt-ease: 12;
  --g-petalcatch-wobble: 0.16;
  --g-petalcatch-wobble-f: 20;
  --g-petalcatch-hop-t: 0.75;
  --g-petalcatch-pop-t: 0.45;
  --g-petalcatch-bounce-t: 0.35;
  --g-petalcatch-sink-t: 0.24;
  --g-petalcatch-glint-t: 1.4;
  --g-petalcatch-par-far: 7;
  --g-petalcatch-par-mid: 4;
  --g-petalcatch-par-near: 2;
  --g-petalcatch-par-front: 9;
  --g-petalcatch-lean: 9;
  --g-petalcatch-sway: 0.24;
  --g-petalcatch-idle: 2;
  --g-petalcatch-cloud-v: 5;
  --g-petalcatch-motes: 9;
  --g-petalcatch-mote-r: 3.2;
  --g-petalcatch-bit: 4.5;
  --g-petalcatch-shake: 3;
  --g-petalcatch-mote-glow: 0;
  --g-petalcatch-streaks: 10;
  --g-petalcatch-streak-w: 96;
  --g-petalcatch-burst: 28;
  --g-petalcatch-rain: 16;
  --g-petalcatch-fx-max: 170;
  --g-petalcatch-flash-a: 0.55;
  --g-petalcatch-tip-time: 4.5;
  --g-petalcatch-tip-fade: 0.35;
  --g-petalcatch-toast-t: 1.3;
  --g-petalcatch-end-hold: 1.6;
  --g-petalcatch-cue-period: 1.4;
  --g-petalcatch-cue-span: 64;
  --g-petalcatch-cue-r: 12;
  --g-petalcatch-cue-y: 14;
  --g-petalcatch-btn: 46px;
  --g-petalcatch-btn-inset: 10px;
  --g-petalcatch-btn-bg: rgba(255, 250, 242, 0.78);
  --g-petalcatch-btn-ink: #6b3a52;
  --g-petalcatch-btn-shadow: 0 2px 8px rgba(74, 51, 72, 0.18);
}

:root.is-dark {
  --g-petalcatch-sky-top: #131a40;
  --g-petalcatch-sky-mid: #262a5e;
  --g-petalcatch-sky-bottom: #5a3d72;
  --g-petalcatch-sun: #ffe3c8;
  --g-petalcatch-shaft: rgba(214, 222, 255, 0.2);
  --g-petalcatch-haze: rgba(120, 88, 150, 0.5);
  --g-petalcatch-cloud: #474b84;
  --g-petalcatch-cloud-shade: #33366a;
  --g-petalcatch-cloud-a: 0.5;
  --g-petalcatch-dot-a: 0.6;
  --g-petalcatch-hill-far: #323e68;
  --g-petalcatch-hill-far-tree: #7f5786;
  --g-petalcatch-hill: #2e5251;
  --g-petalcatch-hill-dark: #264648;
  --g-petalcatch-hill-tree: #a5628a;
  --g-petalcatch-hill-tree-light: #c985aa;
  --g-petalcatch-bush: #2e5f40;
  --g-petalcatch-bush-dark: #214932;
  --g-petalcatch-azalea: #c46b95;
  --g-petalcatch-meadow: #356349;
  --g-petalcatch-meadow-dark: #2b543c;
  --g-petalcatch-pool: rgba(214, 222, 255, 0.12);
  --g-petalcatch-grass: #285233;
  --g-petalcatch-grass-light: #3d7247;
  --g-petalcatch-grass-dark: #1c3f26;
  --g-petalcatch-flower: #f3e6b0;
  --g-petalcatch-bark: #6a452c;
  --g-petalcatch-bark-dark: #3e2818;
  --g-petalcatch-crown: #c27497;
  --g-petalcatch-crown-light: #e6a6c3;
  --g-petalcatch-crown-dark: #965070;
  --g-petalcatch-crown-deep: #6f3a57;
  --g-petalcatch-petal: #f58cb6;
  --g-petalcatch-petal-light: #ffe2ee;
  --g-petalcatch-thorn: #b0574c;
  --g-petalcatch-thorn-dark: #5f2a25;
  --g-petalcatch-thorn-leaf: #5aa34c;
  --g-petalcatch-good-halo: rgba(255, 214, 236, 0.55);
  --g-petalcatch-bad-halo: rgba(255, 90, 90, 0.45);
  --g-petalcatch-basket: #b3804c;
  --g-petalcatch-basket-dark: #6e4524;
  --g-petalcatch-basket-light: #d9ad78;
  --g-petalcatch-basket-inside: #3e2716;
  --g-petalcatch-combo-bg: rgba(36, 28, 60, 0.94);
  --g-petalcatch-combo-track: rgba(255, 255, 255, 0.16);
  --g-petalcatch-combo-ink: #f6eefc;
  --g-petalcatch-toast-gold: #4a3a14;
  --g-petalcatch-toast-gold-ink: #ffe08a;
  --g-petalcatch-toast-cool: #16384a;
  --g-petalcatch-toast-cool-ink: #bfeaff;
  --g-petalcatch-mote: #ffe9a0;
  --g-petalcatch-mote-glow: 1;
  --g-petalcatch-fence: #8a6c4c;
  --g-petalcatch-fence-light: #b39672;
  --g-petalcatch-fence-shade: rgba(20, 14, 30, 0.35);
  --g-petalcatch-bed-leaf: #2f6036;
  --g-petalcatch-bed-a: #c97092;
  --g-petalcatch-bed-b: #d4b25a;
  --g-petalcatch-bed-c: #9b83c4;
  --g-petalcatch-cue: #f6eefc;
  --g-petalcatch-gust: #e9e2ff;
  --g-petalcatch-chip: rgba(36, 28, 60, 0.92);
  --g-petalcatch-chip-ink: #f6eefc;
  --g-petalcatch-btn-bg: rgba(36, 28, 60, 0.72);
  --g-petalcatch-btn-ink: #ffd0e2;
  --g-petalcatch-btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

:root.theme-cyberneon {
  --g-petalcatch-sky-top: #070818;
  --g-petalcatch-sky-mid: #1a0f3d;
  --g-petalcatch-sky-bottom: #3d1258;
  --g-petalcatch-sun: #ff5fd2;
  --g-petalcatch-shaft: rgba(0, 240, 208, 0.13);
  --g-petalcatch-haze: rgba(255, 61, 242, 0.2);
  --g-petalcatch-cloud: #2b1b5c;
  --g-petalcatch-cloud-shade: #1e1446;
  --g-petalcatch-hill-far: #1d1a4a;
  --g-petalcatch-hill-far-tree: #a83a9f;
  --g-petalcatch-hill: #12324a;
  --g-petalcatch-hill-dark: #0d2638;
  --g-petalcatch-hill-tree: #a8379a;
  --g-petalcatch-hill-tree-light: #d466c8;
  --g-petalcatch-bush: #0f4a4a;
  --g-petalcatch-bush-dark: #0a3434;
  --g-petalcatch-azalea: #00f0d0;
  --g-petalcatch-meadow: #10303f;
  --g-petalcatch-meadow-dark: #0b2532;
  --g-petalcatch-pool: rgba(0, 240, 208, 0.14);
  --g-petalcatch-grass: #0d3a3a;
  --g-petalcatch-grass-light: #11625e;
  --g-petalcatch-grass-dark: #072828;
  --g-petalcatch-flower: #8affef;
  --g-petalcatch-bark: #3a2650;
  --g-petalcatch-bark-dark: #1f1430;
  --g-petalcatch-crown: #d63fb6;
  --g-petalcatch-crown-light: #ff8ce6;
  --g-petalcatch-crown-dark: #9a2a88;
  --g-petalcatch-crown-deep: #5e1a5a;
  --g-petalcatch-petal: #ff5fc8;
  --g-petalcatch-petal-light: #ffd9f5;
  --g-petalcatch-petal-dark: #b0218a;
  --g-petalcatch-blossom-center: #00f0d0;
  --g-petalcatch-stamen: #00b8a0;
  --g-petalcatch-good-halo: rgba(255, 95, 200, 0.7);
  --g-petalcatch-bad-halo: rgba(255, 70, 70, 0.6);
  --g-petalcatch-bow: #00f0d0;
  --g-petalcatch-bow-dark: #00a890;
  --g-petalcatch-combo: #ff5fc8;
  --g-petalcatch-combo-2: #00f0d0;
  --g-petalcatch-combo-3: #ffe14d;
  --g-petalcatch-combo-bg: rgba(14, 10, 36, 0.94);
  --g-petalcatch-mote: #00f0d0;
  --g-petalcatch-gust: #00f0d0;
  --g-petalcatch-fence: #3b2f66;
  --g-petalcatch-fence-light: #5a4a96;
  --g-petalcatch-fence-shade: rgba(0, 0, 0, 0.35);
  --g-petalcatch-bed-leaf: #0f5a4a;
  --g-petalcatch-bed-a: #ff3df2;
  --g-petalcatch-bed-b: #00f0d0;
  --g-petalcatch-bed-c: #9a7bff;
  --g-petalcatch-chip: rgba(14, 10, 36, 0.92);
  --g-petalcatch-chip-ink: #f4e9ff;
}

:root.hc {
  --g-petalcatch-good-halo: rgba(29, 20, 32, 0.5);
  --g-petalcatch-bad-halo: rgba(170, 0, 20, 0.7);
  --g-petalcatch-edge: #1d1420;
  --g-petalcatch-edge-w: 2.5;
  --g-petalcatch-veil: rgba(255, 255, 255, 0.38);
  --g-petalcatch-chip: #ffffff;
  --g-petalcatch-chip-ink: #111111;
  --g-petalcatch-combo-bg: #ffffff;
  --g-petalcatch-combo-track: rgba(0, 0, 0, 0.3);
  --g-petalcatch-combo-ink: #111111;
  --g-petalcatch-toast-gold-ink: #4a2a00;
  --g-petalcatch-toast-cool-ink: #0a3550;
}

:root.hc.is-dark {
  --g-petalcatch-good-halo: rgba(255, 255, 255, 0.5);
  --g-petalcatch-edge: #ffffff;
  --g-petalcatch-veil: rgba(0, 0, 0, 0.4);
  --g-petalcatch-chip: #000000;
  --g-petalcatch-chip-ink: #ffffff;
  --g-petalcatch-combo-bg: #000000;
  --g-petalcatch-combo-track: rgba(255, 255, 255, 0.35);
  --g-petalcatch-combo-ink: #ffffff;
  --g-petalcatch-toast-gold-ink: #ffe08a;
  --g-petalcatch-toast-cool-ink: #bfeaff;
}

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

#game-dom .g-petalcatch-btn {
  position: absolute;
  bottom: var(--g-petalcatch-btn-inset);
  width: var(--g-petalcatch-btn);
  height: var(--g-petalcatch-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: var(--g-petalcatch-btn-bg);
  color: var(--g-petalcatch-btn-ink);
  box-shadow: var(--g-petalcatch-btn-shadow);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#game-dom .g-petalcatch-btn.left {
  left: var(--g-petalcatch-btn-inset);
}

#game-dom .g-petalcatch-btn.right {
  right: var(--g-petalcatch-btn-inset);
}

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

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

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