:root {
  --g-pantry-floor-top: #b4d58f;
  --g-pantry-floor-bottom: #86b465;
  --g-pantry-moss: #77a65a;
  --g-pantry-moss-dark: #557f40;
  --g-pantry-grass: #8cc06a;
  --g-pantry-grass-light: #c3e597;
  --g-pantry-pebble: #d9d2c3;
  --g-pantry-flower: #fff3f7;
  --g-pantry-flower-heart: #ffd34d;
  --g-pantry-check-a: rgba(214, 84, 76, 0.5);
  --g-pantry-check-b: #fbf3e4;
  --g-pantry-hem: #c9544f;
  --g-pantry-fringe: #f4e6cf;
  --g-pantry-blanket-shade: rgba(90, 45, 30, 0.22);
  --g-pantry-fold: rgba(120, 60, 40, 0.1);
  --g-pantry-dapple: #fff6cf;
  --g-pantry-dapple-a: 0.2;
  --g-pantry-glow-mode: lighter;
  --g-pantry-tile-face: #f8e2b4;
  --g-pantry-tile-face-2: #e7c48c;
  --g-pantry-tile-side: #c08b55;
  --g-pantry-tile-side-2: #8f5f36;
  --g-pantry-tile-grain: rgba(160, 105, 55, 0.22);
  --g-pantry-tile-hi: rgba(255, 255, 255, 0.6);
  --g-pantry-tile-edge: #9a6a3e;
  --g-pantry-shadow: rgba(70, 38, 18, 0.42);
  --g-pantry-dim: rgba(52, 34, 26, 0.5);
  --g-pantry-back: #d2a46b;
  --g-pantry-back-2: #b98a52;
  --g-pantry-back-mark: #9a6b3c;
  --g-pantry-acorn: #c98a4b;
  --g-pantry-acorn-cap: #7a5232;
  --g-pantry-berry: #4d6fd6;
  --g-pantry-berry-dark: #2c3f8f;
  --g-pantry-mushroom: #e0493d;
  --g-pantry-mushroom-dot: #fff8ee;
  --g-pantry-stem: #f3e4cb;
  --g-pantry-pinecone: #8a5a35;
  --g-pantry-pinecone-light: #cf9a62;
  --g-pantry-honey: #f4a81f;
  --g-pantry-honey-pot: #c86f3a;
  --g-pantry-leaf: #f07c2a;
  --g-pantry-leaf-vein: #b04c14;
  --g-pantry-feather: #f1e9d8;
  --g-pantry-feather-band: #8b6646;
  --g-pantry-apple: #8fcf3f;
  --g-pantry-apple-dark: #5a9624;
  --g-pantry-grapes: #8e4fc9;
  --g-pantry-grapes-light: #c9a3f2;
  --g-pantry-blossom: #f58fb4;
  --g-pantry-blossom-heart: #ffd34d;
  --g-pantry-snail: #f2c14a;
  --g-pantry-snail-body: #b9c99c;
  --g-pantry-egg: #a6dcf0;
  --g-pantry-egg-speck: #5a87a3;
  --g-pantry-sprig: #5fae55;
  --g-pantry-twig: #6f4a2f;
  --g-pantry-vine: #4e9a3c;
  --g-pantry-vine-dark: #2f6b26;
  --g-pantry-vine-leaf: #82c85e;
  --g-pantry-frost: rgba(205, 239, 253, 0.62);
  --g-pantry-frost-edge: #ffffff;
  --g-pantry-frost-crack: #6aa6c9;
  --g-pantry-wicker: #c99652;
  --g-pantry-wicker-dark: #8a5d2c;
  --g-pantry-wicker-light: #ecc684;
  --g-pantry-liner: #f7ecd6;
  --g-pantry-liner-gold: #ffe6a3;
  --g-pantry-liner-warn: #f5c3b2;
  --g-pantry-star: #ffc928;
  --g-pantry-box-wood: #c48a50;
  --g-pantry-box-dark: #7d5130;
  --g-pantry-box-cloth: #e36d66;
  --g-pantry-fur: #c8733a;
  --g-pantry-fur-dark: #8e4b22;
  --g-pantry-fur-light: #f1b27a;
  --g-pantry-belly: #f7dcc0;
  --g-pantry-eye: #2a1d18;
  --g-pantry-nose: #4a2a20;
  --g-pantry-log: #8d6340;
  --g-pantry-log-dark: #5e4029;
  --g-pantry-log-ring: #d2a978;
  --g-pantry-jar: rgba(196, 228, 240, 0.78);
  --g-pantry-jar-edge: #6f8f9c;
  --g-pantry-jar-fill: #ffcf5a;
  --g-pantry-jar-lid: #b5814f;
  --g-pantry-pip-off: rgba(90, 60, 35, 0.28);
  --g-pantry-icon-ink: #6b4426;
  --g-pantry-ladybug: #e8433f;
  --g-pantry-spark: #fff2a8;
  --g-pantry-gold: #ffd04a;
  --g-pantry-gold-ink: rgba(122, 72, 10, 0.85);
  --g-pantry-hurt: #ff6b6b;
  --g-pantry-ring: #fffdf5;
  --g-pantry-hint: #ffe066;
  --g-pantry-chip: rgba(255, 250, 242, 0.95);
  --g-pantry-chip-ink: #4a3328;
  --g-pantry-cue: #7a4a20;
  --g-pantry-vw: 360;
  --g-pantry-vh: 540;
  --g-pantry-board-top: 10;
  --g-pantry-board-bottom: 410;
  --g-pantry-board-side: 8;
  --g-pantry-tile: 46;
  --g-pantry-gap: 3;
  --g-pantry-lift: 6;
  --g-pantry-side: 5;
  --g-pantry-round: 0.24;
  --g-pantry-zoom-max: 1.8;
  --g-pantry-hit-pad: 10;
  --g-pantry-pill-time: 1.2;
  --g-pantry-pill-min: 0.5;
  --g-pantry-strip-top: 414;
  --g-pantry-strip-h: 56;
  --g-pantry-tray-top: 474;
  --g-pantry-tray-h: 62;
  --g-pantry-slot: 38;
  --g-pantry-slot-gap: 3;
  --g-pantry-tray-k: 0.9;
  --g-pantry-arc: 80;
  --g-pantry-fly: 0.34;
  --g-pantry-land: 0.18;
  --g-pantry-merge: 0.16;
  --g-pantry-pop: 0.3;
  --g-pantry-steal: 0.8;
  --g-pantry-flip: 0.28;
  --g-pantry-shuffle: 0.5;
  --g-pantry-back-time: 0.3;
  --g-pantry-release: 0.4;
  --g-pantry-bounce: 0.28;
  --g-pantry-glint: 2.8;
  --g-pantry-bug-every: 14;
  --g-pantry-assist-hint: 6;
  --g-pantry-hint-time: 4;
  --g-pantry-float-fs: 18px;
  --g-pantry-chip-fs: 14px;
  --g-pantry-banner-fs: 21px;
  --g-pantry-banner-sub: 15px;
  --g-pantry-banner-w: 320px;
  --g-pantry-tip-time: 5;
  --g-pantry-tip-fade: 0.35;
  --g-pantry-note-time: 1.6;
  --g-pantry-cue-period: 1.4;
  --g-pantry-end-hold: 1.6;
  --g-pantry-mech-img: 72;
  --g-pantry-mech-w: 300px;
  --g-pantry-bar-h: 66;
  --g-pantry-pad-h: 58;
  --g-pantry-btn: 48px;
  --g-pantry-icon: 24px;
  --g-pantry-gap-btn: 10px;
  --g-pantry-group-gap: 22px;
  --g-pantry-inset: 8px;
  --g-pantry-badge: 18px;
  --g-pantry-badge-pad: 4px;
  --g-pantry-badge-fs: 11px;
  --g-pantry-btn-bg: rgba(255, 250, 242, 0.9);
  --g-pantry-btn-ink: #6b4426;
  --g-pantry-btn-off: 0.42;
  --g-pantry-btn-shadow: 0 2px 8px rgba(70, 40, 20, 0.28);
  --g-pantry-badge-bg: #e36d4f;
  --g-pantry-badge-ink: #ffffff;
}

:root.is-dark {
  --g-pantry-floor-top: #1d3328;
  --g-pantry-floor-bottom: #13241d;
  --g-pantry-moss: #24442f;
  --g-pantry-moss-dark: #173022;
  --g-pantry-grass: #2e5a3a;
  --g-pantry-grass-light: #4b7d52;
  --g-pantry-pebble: #4d5257;
  --g-pantry-flower: #c9c3e8;
  --g-pantry-flower-heart: #e8c35a;
  --g-pantry-check-a: rgba(86, 72, 150, 0.55);
  --g-pantry-check-b: #2c2a44;
  --g-pantry-hem: #4c3f86;
  --g-pantry-fringe: #5a5276;
  --g-pantry-blanket-shade: rgba(0, 0, 0, 0.4);
  --g-pantry-fold: rgba(0, 0, 0, 0.14);
  --g-pantry-dapple: #ffe9a8;
  --g-pantry-dapple-a: 0.55;
  --g-pantry-tile-face: #e9cf9d;
  --g-pantry-tile-face-2: #c9a26b;
  --g-pantry-tile-side: #8f6239;
  --g-pantry-tile-side-2: #5c3b20;
  --g-pantry-tile-hi: rgba(255, 245, 220, 0.42);
  --g-pantry-shadow: rgba(0, 0, 0, 0.6);
  --g-pantry-dim: rgba(12, 10, 26, 0.58);
  --g-pantry-back: #a77d4c;
  --g-pantry-back-2: #8c6438;
  --g-pantry-back-mark: #6d4a28;
  --g-pantry-liner: #3b3554;
  --g-pantry-liner-gold: #6b5a2c;
  --g-pantry-liner-warn: #6a3440;
  --g-pantry-wicker: #9c6f3c;
  --g-pantry-wicker-dark: #5e3e1d;
  --g-pantry-wicker-light: #c49558;
  --g-pantry-log: #6a4a30;
  --g-pantry-log-dark: #3f2b1b;
  --g-pantry-jar: rgba(120, 150, 190, 0.55);
  --g-pantry-jar-edge: #a9c3dc;
  --g-pantry-pip-off: rgba(220, 210, 255, 0.22);
  --g-pantry-icon-ink: #f3dcb6;
  --g-pantry-ring: #fff6d8;
  --g-pantry-chip: rgba(36, 28, 52, 0.94);
  --g-pantry-chip-ink: #f6eefc;
  --g-pantry-cue: #fffdf5;
  --g-pantry-btn-bg: rgba(40, 32, 60, 0.86);
  --g-pantry-btn-ink: #ffdcae;
  --g-pantry-btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

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

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

#game-dom .g-pantry-row {
  display: flex;
  justify-content: center;
  gap: max(var(--g-pantry-gap-btn), var(--target-gap));
}

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

#game-dom .g-pantry-btn[aria-disabled="true"] svg {
  opacity: var(--g-pantry-btn-off);
}

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

#game-dom .g-pantry-btn b {
  position: absolute;
  top: 0;
  right: 0;
  min-width: var(--g-pantry-badge);
  height: var(--g-pantry-badge);
  padding: 0 var(--g-pantry-badge-pad);
  border-radius: var(--r-pill);
  background: var(--g-pantry-badge-bg);
  color: var(--g-pantry-badge-ink);
  font-size: var(--g-pantry-badge-fs);
  font-weight: var(--fw-x);
  line-height: var(--g-pantry-badge);
  text-align: center;
}

#game-dom .g-pantry-btn[aria-disabled="true"] b {
  background: var(--g-pantry-pip-off);
}

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

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

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

#game-dom .g-pantry-gap {
  width: var(--g-pantry-group-gap);
}

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

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

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

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

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