:root {
  --g-slide-sky-top: #8fd0f2;
  --g-slide-sky-bottom: #dff4f6;
  --g-slide-hill-far: #b9dcb0;
  --g-slide-hill: #8cc47a;
  --g-slide-far-trunk: #a88a6c;
  --g-slide-canopy: #5fb052;
  --g-slide-canopy-dark: #3e8a3d;
  --g-slide-canopy-light: #9bd66b;
  --g-slide-bark: #9a6a43;
  --g-slide-bark-dark: #6b4429;
  --g-slide-bark-light: #c08a5a;
  --g-slide-groove: rgba(58, 32, 16, 0.32);
  --g-slide-plate: rgba(255, 226, 190, 0.14);
  --g-slide-hollow: #4a2c18;
  --g-slide-hollow-deep: #2c190c;
  --g-slide-rim: #e2b47c;
  --g-slide-rim-dark: #a8774a;
  --g-slide-ring: rgba(122, 76, 40, 0.45);
  --g-slide-pocket: rgba(255, 220, 180, 0.06);
  --g-slide-pocket-edge: rgba(255, 226, 190, 0.1);
  --g-slide-wood-a: #e0b37a;
  --g-slide-wood-a-dark: #a87644;
  --g-slide-wood-b: #c98a52;
  --g-slide-wood-b-dark: #8e5a30;
  --g-slide-wood-c: #a86e44;
  --g-slide-wood-c-dark: #6e4426;
  --g-slide-grain: rgba(92, 52, 22, 0.32);
  --g-slide-end: #f2d3a0;
  --g-slide-end-ring: rgba(150, 96, 50, 0.5);
  --g-slide-moss: #7cc24f;
  --g-slide-moss-dark: #4f8f35;
  --g-slide-cap: #e8574a;
  --g-slide-cap-dot: #fff4e8;
  --g-slide-stem: #f6e6cc;
  --g-slide-sap: #f3a52b;
  --g-slide-sap-dark: #c06a12;
  --g-slide-sap-light: #ffe08a;
  --g-slide-sap-glow: #ffc94d;
  --g-slide-knot: #7a4e2c;
  --g-slide-knot-dark: #4a2c16;
  --g-slide-spile: #b8c2cc;
  --g-slide-spile-dark: #6f7a86;
  --g-slide-bucket: #8fb6d6;
  --g-slide-bucket-dark: #4f7898;
  --g-slide-bucket-band: #6d8296;
  --g-slide-ground: #8a5f3c;
  --g-slide-ground-dark: #5e3f26;
  --g-slide-grass: #7cc35e;
  --g-slide-grass-dark: #4f9a42;
  --g-slide-root: #8d5f3a;
  --g-slide-root-dark: #5f3e24;
  --g-slide-eye: #3a2418;
  --g-slide-cheek: rgba(255, 128, 128, 0.45);
  --g-slide-cursor: #ffffff;
  --g-slide-hint: #ffe066;
  --g-slide-chip: rgba(255, 250, 242, 0.92);
  --g-slide-chip-ink: #4a3348;
  --g-slide-acorn: #c98a4a;
  --g-slide-acorn-dark: #7a4a22;
  --g-slide-acorn-cap: #8a5a32;
  --g-slide-acorn-cap-dark: #4f3018;
  --g-slide-wet: rgba(40, 90, 150, 0.28);
  --g-slide-drop: #9fd6ff;
  --g-slide-glaze: rgba(255, 196, 60, 0.42);
  --g-slide-arrow: rgba(70, 38, 14, 0.75);
  --g-slide-vine: #6fbf4a;
  --g-slide-vine-dark: #3d7a2a;
  --g-slide-mech-img: 72px;
  --g-slide-mech-w: 300px;
  --g-slide-canopy-h: 92px;
  --g-slide-face-h: 64px;
  --g-slide-bottom: 128px;
  --g-slide-side: 12px;
  --g-slide-frame: 12px;
  --g-slide-trunk-pad: 10px;
  --g-slide-spile-room: 44px;
  --g-slide-max-cell: 64px;
  --g-slide-min-cell: 34px;
  --g-slide-radius: 0.24;
  --g-slide-pad: 12px;
  --g-slide-chip-fs: 14px;
  --g-slide-float-fs: 18px;
  --g-slide-snap: 0.12s;
  --g-slide-banner-fs: 21px;
  --g-slide-banner-sub: 15px;
  --g-slide-banner-w: 320px;
  --g-slide-btn: 52px;
  --g-slide-btn-icon: 22px;
  --g-slide-sr: 1px;
}

:root.is-dark {
  --g-slide-sky-top: #1c2346;
  --g-slide-sky-bottom: #45507e;
  --g-slide-hill-far: #34506a;
  --g-slide-hill: #2c4a43;
  --g-slide-far-trunk: #4a3c4a;
  --g-slide-canopy: #2f6a3e;
  --g-slide-canopy-dark: #1f4a2e;
  --g-slide-canopy-light: #4f8f4c;
  --g-slide-bark: #6e4a30;
  --g-slide-bark-dark: #45291a;
  --g-slide-bark-light: #8c6040;
  --g-slide-groove: rgba(16, 8, 4, 0.4);
  --g-slide-plate: rgba(255, 226, 190, 0.07);
  --g-slide-hollow: #2e1b0f;
  --g-slide-hollow-deep: #170d06;
  --g-slide-rim: #b98a5a;
  --g-slide-rim-dark: #7a5232;
  --g-slide-wood-a: #c99a64;
  --g-slide-wood-a-dark: #8a5e34;
  --g-slide-wood-b: #ad7444;
  --g-slide-wood-b-dark: #6e4424;
  --g-slide-wood-c: #8e5c38;
  --g-slide-wood-c-dark: #57351c;
  --g-slide-end: #dbb886;
  --g-slide-moss: #5f9a40;
  --g-slide-moss-dark: #3a6a28;
  --g-slide-spile: #8e98a4;
  --g-slide-spile-dark: #4e5864;
  --g-slide-bucket: #5f84a4;
  --g-slide-bucket-dark: #344e66;
  --g-slide-bucket-band: #4a5a6c;
  --g-slide-ground: #5a3e28;
  --g-slide-ground-dark: #3a2718;
  --g-slide-grass: #3f7a46;
  --g-slide-grass-dark: #2a5532;
  --g-slide-root: #6a4528;
  --g-slide-root-dark: #432a16;
  --g-slide-chip: rgba(36, 28, 60, 0.9);
  --g-slide-chip-ink: #f6eefc;
  --g-slide-acorn: #a8703c;
  --g-slide-acorn-dark: #5a3418;
  --g-slide-acorn-cap: #6a4426;
  --g-slide-acorn-cap-dark: #3a2412;
  --g-slide-wet: rgba(30, 60, 110, 0.38);
  --g-slide-drop: #7fb6e6;
  --g-slide-glaze: rgba(240, 170, 40, 0.38);
  --g-slide-vine: #4f9a3a;
  --g-slide-vine-dark: #2a5a1e;
}

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

#game-dom .g-slide-btn {
  position: absolute;
  bottom: calc(var(--g-slide-pad) + 4px);
  pointer-events: auto;
  min-width: var(--g-slide-btn);
  height: var(--g-slide-btn);
  padding: 0 var(--gap-s);
  display: inline-flex;
  align-items: center;
  justify-content: 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);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
}

#game-dom .g-slide-undo {
  right: var(--g-slide-pad);
}

#game-dom .g-slide-hint {
  left: var(--g-slide-pad);
}

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

#game-dom .g-slide-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

#game-dom .g-slide-btn:active:not(:disabled) {
  transform: scale(var(--press-s));
}

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

#game-dom .g-slide-mech {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 2 * var(--gap-m)), var(--g-slide-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-slide-mech img {
  width: var(--g-slide-mech-img);
  height: var(--g-slide-mech-img);
}

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

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

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

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