:root {
  --g-guard-grass: #9fd481;
  --g-guard-grass-2: #94cc77;
  --g-guard-grass-dark: #6fb35a;
  --g-guard-path: #e8d2a3;
  --g-guard-path-edge: #c9a96e;
  --g-guard-rock: #b4b2aa;
  --g-guard-rock-dark: #85847d;
  --g-guard-trunk: #8a5a38;
  --g-guard-crown: #5fbf6a;
  --g-guard-crown-dark: #3d9150;
  --g-guard-crown-light: #9be39a;
  --g-guard-apple: #ef5b5b;
  --g-guard-pad: #a6d94a;
  --g-guard-pad-dark: #6f9a2f;
  --g-guard-lady: #ef4a4a;
  --g-guard-lady-dark: #2a1e24;
  --g-guard-robin: #8a6a52;
  --g-guard-robin-dark: #5e4632;
  --g-guard-robin-belly: #ff8a4a;
  --g-guard-frog: #6fcf5a;
  --g-guard-frog-dark: #2f7a37;
  --g-guard-tongue: #ff7fa8;
  --g-guard-aphid: #9be05a;
  --g-guard-cater: #8fd04a;
  --g-guard-cater-dark: #4f8a2a;
  --g-guard-snail: #d9c3a3;
  --g-guard-shell: #c98a4b;
  --g-guard-shell-dark: #7a5236;
  --g-guard-moth: #d9c9ef;
  --g-guard-moth-dark: #7a6a96;
  --g-guard-beetle: #4f6fe8;
  --g-guard-beetle-dark: #23358a;
  --g-guard-eye: #ffffff;
  --g-guard-pupil: #2a1e24;
  --g-guard-hp: #5fd16a;
  --g-guard-hp-bg: rgba(30, 30, 40, 0.35);
  --g-guard-range: #ffffff;
  --g-guard-select: #ffe066;
  --g-guard-gold: #ffd04a;
  --g-guard-gold-ink: rgba(122, 72, 10, 0.85);
  --g-guard-chip: rgba(255, 250, 242, 0.94);
  --g-guard-chip-ink: #4a3348;
  --g-guard-hurt: #ff6b6b;
  --g-guard-float-fs: 16px;
  --g-guard-chip-fs: 14px;
  --g-guard-banner-fs: 21px;
  --g-guard-banner-sub: 15px;
  --g-guard-banner-w: 320px;
  --g-guard-tip-time: 5;
  --g-guard-tip-fade: 0.35;
  --g-guard-next-time: 6;
  --g-guard-named: 3;
  --g-guard-cap-fs: var(--fs-2xs);
  --g-guard-cap-lh: 1.1;
  --g-guard-cue-ring: #ffe066;
  --g-guard-cue-w: 4px;
  --g-guard-cue-time: 1.2s;
  --g-guard-end-hold: 1.6;
  --g-guard-tray-h: 76;
  --g-guard-max-cell: 56;
  --g-guard-mech-img: 72;
  --g-guard-mech-w: 300px;
  --g-guard-btn: 52px;
  --g-guard-gap: 8px;
  --g-guard-inset: 10px;
  --g-guard-icon: 22px;
  --g-guard-btn-bg: rgba(255, 250, 242, 0.88);
  --g-guard-btn-ink: #3f6b35;
  --g-guard-btn-on: #ffe066;
  --g-guard-btn-shadow: 0 2px 8px rgba(30, 60, 25, 0.28);
}

:root.is-dark {
  --g-guard-grass: #2f6b3a;
  --g-guard-grass-2: #2a6034;
  --g-guard-grass-dark: #1d4a28;
  --g-guard-path: #6a5a40;
  --g-guard-path-edge: #4a3e2c;
  --g-guard-rock: #6c6a64;
  --g-guard-rock-dark: #45443f;
  --g-guard-chip: rgba(36, 28, 60, 0.92);
  --g-guard-chip-ink: #f6eefc;
  --g-guard-btn-bg: rgba(36, 28, 60, 0.82);
  --g-guard-btn-ink: #c9f0b0;
  --g-guard-btn-on: #8a6a2a;
  --g-guard-btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

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

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

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

#game-dom .g-guard-btn.on {
  background: var(--g-guard-btn-on);
}

#game-dom .g-guard-btn.named {
  height: auto;
  min-height: max(var(--g-guard-btn), var(--target));
  padding-block: var(--gap-xs);
}

#game-dom .g-guard-btn small {
  font-size: var(--g-guard-cap-fs);
  font-weight: var(--fw-b);
  line-height: var(--g-guard-cap-lh);
  white-space: nowrap;
}

#game-dom .g-guard-btn.cue {
  animation: g-guard-cue var(--g-guard-cue-time) var(--ease) infinite;
}

@keyframes g-guard-cue {
  50% {
    box-shadow: var(--g-guard-btn-shadow), 0 0 0 var(--g-guard-cue-w) var(--g-guard-cue-ring);
  }
}

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

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

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

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

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

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

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

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

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

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

:root.reduce-motion #game-dom .g-guard-btn.cue {
  animation: none;
  box-shadow: var(--g-guard-btn-shadow), 0 0 0 var(--g-guard-cue-w) var(--g-guard-cue-ring);
}