:root {
  --g-words-sky-top: #9fd0f2;
  --g-words-sky-bottom: #e6f5df;
  --g-words-sun: #fff2bd;
  --g-words-ray: rgba(255, 247, 210, 0.2);
  --g-words-cloud: rgba(255, 255, 255, 0.86);
  --g-words-hill-far: #bcdcb2;
  --g-words-tree-far: #93c58c;
  --g-words-tree: #63a466;
  --g-words-pine: #3f7f57;
  --g-words-trunk: #7a5434;
  --g-words-meadow: #8fcb6b;
  --g-words-meadow-dark: #5e9c4e;
  --g-words-moss: #79b552;
  --g-words-moss-light: #b8e083;
  --g-words-fern: #4f9a4a;
  --g-words-fern-dark: #2f6b33;
  --g-words-pebble: #cfc3b2;
  --g-words-board: #b9834f;
  --g-words-board-light: #dcaa73;
  --g-words-board-dark: #7a5130;
  --g-words-grain: rgba(92, 56, 28, 0.26);
  --g-words-paper: #fbf3df;
  --g-words-paper-edge: #e2d0aa;
  --g-words-vein: rgba(128, 168, 82, 0.16);
  --g-words-tile: #fff8ea;
  --g-words-tile-light: #ffffff;
  --g-words-tile-dark: #e5d4b3;
  --g-words-tile-edge: rgba(122, 88, 48, 0.32);
  --g-words-ink: #4a3427;
  --g-words-sel: rgba(255, 255, 255, 0.8);
  --g-words-sel-edge: #f09a2c;
  --g-words-bad: rgba(255, 112, 112, 0.75);
  --g-words-cursor: #2f80d1;
  --g-words-hint: #ffc92e;
  --g-words-hl-0: #9fdc7c;
  --g-words-hl-1: #8fcff3;
  --g-words-hl-2: #ffb6ca;
  --g-words-hl-3: #ffd873;
  --g-words-hl-4: #cdb8f6;
  --g-words-hl-5: #ffc08c;
  --g-words-hl-6: #8fe1cf;
  --g-words-hl-7: #f6a8a8;
  --g-words-list-chip: rgba(255, 250, 240, 0.93);
  --g-words-list-ink: #4a3427;
  --g-words-list-done: rgba(74, 52, 39, 0.5);
  --g-words-strike: rgba(74, 52, 39, 0.75);
  --g-words-chip: rgba(255, 250, 242, 0.92);
  --g-words-chip-ink: #4a3348;
  --g-words-leaf: #6fbf58;
  --g-words-leaf-light: #b6e07f;
  --g-words-petal: #ffc4dc;
  --g-words-spark: #fff1a6;
  --g-words-font: var(--font-display);
  --g-words-side: 14px;
  --g-words-top: 10px;
  --g-words-gap: 12px;
  --g-words-max-cell: 58px;
  --g-words-board-pad: 12px;
  --g-words-board-r: 20px;
  --g-words-tile-r: 0.26;
  --g-words-tile-m: 0.07;
  --g-words-letter: 0.54;
  --g-words-letter-fw: 700;
  --g-words-cap-w: 0.74;
  --g-words-list-fs: 15px;
  --g-words-list-min: 11px;
  --g-words-list-rows: 4;
  --g-words-list-pad: 10px;
  --g-words-list-gap: 6px;
  --g-words-chip-fs: 14px;
  --g-words-float-fs: 20px;
  --g-words-banner-fs: 21px;
  --g-words-banner-sub: 15px;
  --g-words-banner-w: 320px;
  --g-words-goal-h: 52px;
  --g-words-btn: 52px;
  --g-words-btn-icon: 22px;
  --g-words-sr: 1px;
  --g-words-cap-in: 0.32s;
  --g-words-pop: 0.36s;
  --g-words-idle: 6s;
  --g-words-end: 2.6s;
  --g-words-tip: 4.5s;
  --g-words-frost: #cfeaff;
  --g-words-frost-edge: rgba(80, 140, 200, 0.55);
  --g-words-frost-ink: #5a9fd6;
  --g-words-gold: #ffd873;
  --g-words-mech-img: 72px;
  --g-words-mech-w: 300px;
}

:root.is-dark {
  --g-words-sky-top: #18213f;
  --g-words-sky-bottom: #3e4c72;
  --g-words-sun: #e9e4ff;
  --g-words-ray: rgba(200, 210, 255, 0.08);
  --g-words-cloud: rgba(200, 200, 235, 0.32);
  --g-words-hill-far: #33456a;
  --g-words-tree-far: #2c4a52;
  --g-words-tree: #24443d;
  --g-words-pine: #1a3530;
  --g-words-trunk: #3f2c20;
  --g-words-meadow: #2f5a40;
  --g-words-meadow-dark: #1f3d2d;
  --g-words-moss: #3f7a45;
  --g-words-moss-light: #6aa260;
  --g-words-fern: #3a7344;
  --g-words-fern-dark: #22492b;
  --g-words-pebble: #7d766c;
  --g-words-board: #8a5d38;
  --g-words-board-light: #a77749;
  --g-words-board-dark: #4f321d;
  --g-words-grain: rgba(30, 16, 6, 0.32);
  --g-words-paper: #efe4cb;
  --g-words-paper-edge: #c9b48b;
  --g-words-vein: rgba(96, 128, 64, 0.16);
  --g-words-tile: #f7eedb;
  --g-words-tile-light: #fffaf0;
  --g-words-tile-dark: #d3c09c;
  --g-words-list-chip: rgba(36, 28, 60, 0.9);
  --g-words-list-ink: #f6eefc;
  --g-words-list-done: rgba(246, 238, 252, 0.55);
  --g-words-strike: rgba(246, 238, 252, 0.8);
  --g-words-chip: rgba(36, 28, 60, 0.9);
  --g-words-chip-ink: #f6eefc;
  --g-words-frost: #4f7397;
  --g-words-frost-edge: rgba(170, 210, 250, 0.45);
  --g-words-frost-ink: #d6ecff;
  --g-words-gold: #e8bd4a;
}

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

#game-dom .g-words-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  min-height: var(--g-words-btn);
  max-width: calc(100% - 2 * var(--gap-l));
  padding: 0 var(--gap-l);
  display: inline-flex;
  align-items: 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);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

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

#game-dom .g-words-hint small {
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

#game-dom .g-words-hint:active:not([aria-disabled='true']) {
  transform: translateX(-50%) scale(var(--press-s));
}

#game-dom .g-words-hint[aria-disabled='true'] {
  opacity: 0.45;
  cursor: default;
}

#game-dom .g-words-hint:focus {
  outline: none;
}

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

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

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

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

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

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

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