/* ui.css — shared UI design system (buttons). Linked by BOTH index.html and editor.html so every
   button across the game + editor speaks one language. Uses the page's theme tokens + the shared depth
   kit (--lift / --sheen / --press / --grad-card) defined in each page's :root.
   Button roles:  (default) = secondary raised tile · .primary/.go = primary (emerald gem) ·
                  .danger = give-up/destructive (ruby) · .controls/.toolbar button / .iconBtn = icon square */

button {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  background: var(--grad-card);              /* warm raised tile, not flat */
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 16px;
  min-width: 64px;
  cursor: pointer;
  box-shadow: var(--lift-sm), var(--sheen);  /* lifted off the canvas + top sheen */
  transition: transform .07s ease, box-shadow .12s ease, filter .12s, background .12s;
}
button:hover { filter: brightness(1.03); box-shadow: var(--lift), var(--sheen); }
button:active { transform: translateY(2px); box-shadow: var(--press); filter: brightness(.99); }  /* presses IN */
button:disabled { opacity: 0.42; cursor: default; transform: none; box-shadow: none; filter: none; }

/* PRIMARY — the single key action on a screen (jewel emerald gem with gloss). `.go` is an alias. */
button.primary,
button.go {
  background: linear-gradient(180deg, #34c89a 0%, var(--s3) 62%, #1ea478 100%);
  border-color: #1c8861;
  color: #06241a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 22px -8px rgba(33,176,131,.55), inset 0 1px 0 rgba(255,255,255,.55);
}
button.primary:hover,
button.go:hover { filter: brightness(1.04); box-shadow: 0 13px 26px -8px rgba(33,176,131,.6), inset 0 1px 0 rgba(255,255,255,.55); }
button.primary:active,
button.go:active { transform: translateY(2px); box-shadow: inset 0 3px 8px rgba(6,36,26,.32); filter: none; }

/* DANGER — give up / destructive (ruby outline, fills on press) */
button.danger {
  background: linear-gradient(180deg, var(--card), #f3e6e0);
  border-color: var(--bad);
  color: var(--bad);
  box-shadow: var(--lift-sm), var(--sheen);
}
button.danger:hover { background: linear-gradient(180deg, #fbeae8, #f3ddd6); filter: none; box-shadow: var(--lift), var(--sheen); }
button.danger:active { transform: translateY(2px); background: rgba(226,59,70,.14); box-shadow: var(--press); }

/* ICON — toolbar squares, identical footprint */
.controls button,
.toolbar button {
  min-width: 0;
  width: 48px;
  height: 46px;
  padding: 0;
  font-size: 19px;
}