:root {
  --g-anttrail-lawn-top: #a8d982;
  --g-anttrail-lawn-bottom: #7cbc58;
  --g-anttrail-blade: #5c9a41;
  --g-anttrail-blade-light: #c2e89a;
  --g-anttrail-flower: #ffd3e1;
  --g-anttrail-flower-2: #fff1a8;
  --g-anttrail-clover: #e9f7d8;
  --g-anttrail-bed-shadow: rgba(38, 62, 20, 0.38);
  --g-anttrail-soil: #c99868;
  --g-anttrail-soil-alt: rgba(255, 236, 205, 0.08);
  --g-anttrail-soil-dark: #a06f45;
  --g-anttrail-soil-light: #d9ad7c;
  --g-anttrail-speck: rgba(110, 70, 40, 0.28);
  --g-anttrail-seam: rgba(80, 45, 20, 0.35);
  --g-anttrail-border: #d8d2c6;
  --g-anttrail-border-dark: #aaa295;
  --g-anttrail-rock: #b6b0a5;
  --g-anttrail-rock-dark: #7f786d;
  --g-anttrail-rock-light: #e7e2d9;
  --g-anttrail-moss: #86b85c;
  --g-anttrail-water: #7ccbea;
  --g-anttrail-water-deep: #3f8cc2;
  --g-anttrail-water-hi: rgba(255, 255, 255, 0.72);
  --g-anttrail-shore: #6f9a4d;
  --g-anttrail-ripple: rgba(255, 255, 255, 0.7);
  --g-anttrail-low: #93724c;
  --g-anttrail-low-dark: #6f5233;
  --g-anttrail-drop: #59aee6;
  --g-anttrail-ant: #4a332b;
  --g-anttrail-ant-dark: #1f1411;
  --g-anttrail-ant-hi: rgba(255, 238, 215, 0.5);
  --g-anttrail-leg: #2a1b16;
  --g-anttrail-red: #e04a3c;
  --g-anttrail-red-dark: #8f2820;
  --g-anttrail-blue: #4078e0;
  --g-anttrail-blue-dark: #20408f;
  --g-anttrail-eye: #ffffff;
  --g-anttrail-pupil: #1a1210;
  --g-anttrail-crumb: #f4c96e;
  --g-anttrail-crumb-dark: #c68b38;
  --g-anttrail-choc: #7a4a2a;
  --g-anttrail-basket: #cf9a5e;
  --g-anttrail-basket-dark: #87572f;
  --g-anttrail-basket-in: #6b4224;
  --g-anttrail-leaf: #66c64e;
  --g-anttrail-leaf-dark: #3a8a30;
  --g-anttrail-vein: rgba(226, 250, 200, 0.85);
  --g-anttrail-fixed: #f39c3d;
  --g-anttrail-fixed-dark: #b45a1c;
  --g-anttrail-pin: #fff4dc;
  --g-anttrail-twig: #a8743f;
  --g-anttrail-twig-dark: #5f3e21;
  --g-anttrail-plank: #c99c62;
  --g-anttrail-pebble: #e6dcf2;
  --g-anttrail-pebble-dark: #9b8db4;
  --g-anttrail-pebble-ink: #5e4a86;
  --g-anttrail-bug: #ee4337;
  --g-anttrail-bug-dark: #8a1d17;
  --g-anttrail-bug-spot: #1c1312;
  --g-anttrail-nest: #b57c4a;
  --g-anttrail-nest-dark: #7a4c2a;
  --g-anttrail-nest-light: #dba26a;
  --g-anttrail-nest-hole: #2a190e;
  --g-anttrail-print: rgba(70, 40, 18, 0.38);
  --g-anttrail-trail: rgba(255, 255, 255, 0.85);
  --g-anttrail-cursor: #ffe066;
  --g-anttrail-hint: #ffd04a;
  --g-anttrail-gold: #ffd04a;
  --g-anttrail-gold-ink: rgba(122, 72, 10, 0.85);
  --g-anttrail-chip: rgba(255, 250, 242, 0.94);
  --g-anttrail-chip-ink: #4a3330;
  --g-anttrail-hurt: #ff6b6b;
  --g-anttrail-rain: rgba(200, 225, 255, 0.75);
  --g-anttrail-cloud: rgba(40, 55, 80, 0.22);
  --g-anttrail-firefly: #fff3a0;
  --g-anttrail-dapple: rgba(255, 250, 215, 0.2);
  --g-anttrail-vignette: rgba(40, 32, 12, 0.22);
  --g-anttrail-shadow: rgba(40, 24, 10, 0.26);
  --g-anttrail-badge: rgba(255, 250, 240, 0.92);
  --g-anttrail-badge-ink: #5a3a26;
  --g-anttrail-cue: #5a3a26;
  --g-anttrail-float-fs: 17px;
  --g-anttrail-chip-fs: 14px;
  --g-anttrail-badge-fs: 11px;
  --g-anttrail-banner-fs: 21px;
  --g-anttrail-banner-sub: 15px;
  --g-anttrail-banner-w: 320px;
  --g-anttrail-tip-time: 9;
  --g-anttrail-tip-fade: 0.35;
  --g-anttrail-note-time: 2.4;
  --g-anttrail-cue-period: 1.4;
  --g-anttrail-end-hold: 2.6;
  --g-anttrail-tray-h: 78;
  --g-anttrail-lane-h: 44;
  --g-anttrail-lane-pad: 4;
  --g-anttrail-pad: 10;
  --g-anttrail-max-cell: 70;
  --g-anttrail-mech-img: 72;
  --g-anttrail-swipe: 16;
  --g-anttrail-pop-time: 0.32;
  --g-anttrail-parade-speed: 190;
  --g-anttrail-ripple-period: 2.2;
  --g-anttrail-flies: 0;
  --g-anttrail-rain-time: 1.6;
  --g-anttrail-cloud-beats: 4;
  --g-anttrail-ant-k: 0.5;
  --g-anttrail-frames: 6;
  --g-anttrail-mech-w: 300px;
  --g-anttrail-btn: 50px;
  --g-anttrail-go-w: 88px;
  --g-anttrail-count-inset: 2px;
  --g-anttrail-count-room: 14px;
  --g-anttrail-gap: 8px;
  --g-anttrail-inset: 12px;
  --g-anttrail-icon: 24px;
  --g-anttrail-quarter: 90deg;
  --g-anttrail-btn-bg: rgba(255, 250, 242, 0.92);
  --g-anttrail-btn-ink: #5a3a26;
  --g-anttrail-btn-on: #ffe48a;
  --g-anttrail-btn-ring: #e0a83a;
  --g-anttrail-go-bg: #2e7d2a;
  --g-anttrail-go-ink: #ffffff;
  --g-anttrail-stop-bg: #b4462a;
  --g-anttrail-count-bg: #5a3a26;
  --g-anttrail-count-ink: #fff6e6;
  --g-anttrail-btn-shadow: 0 2px 8px rgba(50, 30, 10, 0.28);
}

:root.is-dark {
  --g-anttrail-lawn-top: #1d3a2a;
  --g-anttrail-lawn-bottom: #12281c;
  --g-anttrail-blade: #2f5e3a;
  --g-anttrail-blade-light: #4f8a55;
  --g-anttrail-flower: #8a6a9a;
  --g-anttrail-flower-2: #9aa06a;
  --g-anttrail-clover: #5f8a6a;
  --g-anttrail-bed-shadow: rgba(0, 0, 0, 0.5);
  --g-anttrail-soil: #6a4a32;
  --g-anttrail-soil-alt: rgba(255, 225, 180, 0.05);
  --g-anttrail-soil-dark: #3e2a1c;
  --g-anttrail-soil-light: #7c5838;
  --g-anttrail-speck: rgba(20, 10, 4, 0.35);
  --g-anttrail-seam: rgba(0, 0, 0, 0.4);
  --g-anttrail-border: #8a8478;
  --g-anttrail-border-dark: #5e594f;
  --g-anttrail-rock: #7d7870;
  --g-anttrail-rock-dark: #45413b;
  --g-anttrail-rock-light: #aaa59b;
  --g-anttrail-moss: #4e7a3a;
  --g-anttrail-water: #3f7fb0;
  --g-anttrail-water-deep: #1d4670;
  --g-anttrail-water-hi: rgba(210, 230, 255, 0.55);
  --g-anttrail-shore: #2f5232;
  --g-anttrail-ripple: rgba(200, 225, 255, 0.5);
  --g-anttrail-low: #4f3a26;
  --g-anttrail-low-dark: #33251a;
  --g-anttrail-drop: #6fb8f0;
  --g-anttrail-ant: #7a5a4c;
  --g-anttrail-ant-dark: #2a1a14;
  --g-anttrail-leg: #4a352e;
  --g-anttrail-ant-hi: rgba(220, 225, 255, 0.55);
  --g-anttrail-crumb: #e8be66;
  --g-anttrail-crumb-dark: #a8742c;
  --g-anttrail-basket: #a87a48;
  --g-anttrail-basket-dark: #5f3c1f;
  --g-anttrail-basket-in: #3f2814;
  --g-anttrail-leaf: #5ab84a;
  --g-anttrail-leaf-dark: #2f7428;
  --g-anttrail-twig: #946538;
  --g-anttrail-plank: #a8804e;
  --g-anttrail-pebble: #c4b8dc;
  --g-anttrail-pebble-dark: #6f6290;
  --g-anttrail-pebble-ink: #2e2448;
  --g-anttrail-nest: #8a5c36;
  --g-anttrail-nest-dark: #4a2e18;
  --g-anttrail-nest-light: #a87648;
  --g-anttrail-print: rgba(255, 230, 190, 0.22);
  --g-anttrail-chip: rgba(36, 28, 60, 0.92);
  --g-anttrail-chip-ink: #f6eefc;
  --g-anttrail-cloud: rgba(5, 10, 25, 0.32);
  --g-anttrail-firefly: #f4ff9a;
  --g-anttrail-dapple: rgba(160, 190, 255, 0.07);
  --g-anttrail-vignette: rgba(0, 0, 10, 0.4);
  --g-anttrail-shadow: rgba(0, 0, 0, 0.38);
  --g-anttrail-badge: rgba(36, 28, 60, 0.9);
  --g-anttrail-badge-ink: #fff3dc;
  --g-anttrail-cue: #fffdf5;
  --g-anttrail-flies: 7;
  --g-anttrail-btn-bg: rgba(36, 28, 60, 0.88);
  --g-anttrail-btn-ink: #ffe9c9;
  --g-anttrail-btn-on: #7a5a1e;
  --g-anttrail-go-bg: #2a7027;
  --g-anttrail-stop-bg: #a1402a;
  --g-anttrail-count-bg: #ffe9c9;
  --g-anttrail-count-ink: #2a1c12;
  --g-anttrail-btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

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

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

#game-dom .g-anttrail-btn {
  position: relative;
  min-width: max(var(--g-anttrail-btn), var(--target));
  height: max(var(--g-anttrail-btn), var(--target));
  padding: 0 var(--gap-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  margin: 0;
  border: 0;
  border-radius: var(--r-m);
  background: var(--g-anttrail-btn-bg);
  color: var(--g-anttrail-btn-ink);
  box-shadow: var(--g-anttrail-btn-shadow);
  font: inherit;
  font-size: var(--fs-s);
  font-weight: var(--fw-x);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#game-dom .g-anttrail-btn.on {
  background: var(--g-anttrail-btn-on);
  box-shadow: var(--g-anttrail-btn-shadow), inset 0 0 0 2px var(--g-anttrail-btn-ring);
}

#game-dom .g-anttrail-btn.go {
  min-width: max(var(--g-anttrail-go-w), var(--target));
  padding: 0 var(--gap-s);
  background: var(--g-anttrail-go-bg);
  color: var(--g-anttrail-go-ink);
  border-radius: var(--r-pill);
}

#game-dom .g-anttrail-btn.stop {
  background: var(--g-anttrail-stop-bg);
}

#game-dom .g-anttrail-btn span {
  white-space: nowrap;
}

#game-dom .g-anttrail-btn.tool {
  padding-right: var(--g-anttrail-count-room);
}

#game-dom .g-anttrail-btn b {
  position: absolute;
  top: var(--g-anttrail-count-inset);
  right: var(--g-anttrail-count-inset);
  min-width: var(--fs-l);
  height: var(--fs-l);
  padding: 0 var(--gap-xs);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--g-anttrail-count-bg);
  color: var(--g-anttrail-count-ink);
  font-size: var(--fs-2xs);
  line-height: 1;
}

#game-dom .g-anttrail-ic {
  display: grid;
  place-items: center;
  transition: rotate var(--t-fast) var(--ease);
}

#game-dom .g-anttrail-ic.d1 {
  rotate: var(--g-anttrail-quarter);
}

#game-dom .g-anttrail-ic.d2 {
  rotate: calc(var(--g-anttrail-quarter) * 2);
}

#game-dom .g-anttrail-ic.d3 {
  rotate: calc(var(--g-anttrail-quarter) * 3);
}

#game-dom .g-anttrail-btn[aria-disabled="true"] {
  opacity: 0.5;
}

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

#game-dom .g-anttrail-btn.go svg {
  fill: currentColor;
}

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

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

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

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

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

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

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

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

:root.reduce-motion #game-dom .g-anttrail-ic {
  transition-duration: 0s;
}