:root {
  --orange: #f04b1e;  /* sampled from Logo.jpg — same as SpinRace */
  --orange-d: #c93a14;
  --orange-l: #ffe3d6;
  --cream: #fff7f0;
  --ink: #2a1f1a;
  --muted: #8a7468;
  --green: #22a95b;
  --red: #e0302b;
  --gold: #ffc21a;
  --font: "Kanit", "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  border: 0; border-radius: 999px; padding: .7em 1.4em;
  font: 600 1.05rem var(--font); color: #fff; background: var(--orange);
  box-shadow: 0 4px 0 var(--orange-d); cursor: pointer;
  transition: transform .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--orange-d); }
.btn:disabled { opacity: .55; }
.btn.white { background: #fff; color: var(--orange); box-shadow: 0 4px 0 rgba(0, 0, 0, .18); }
.btn.ghost { background: transparent; color: var(--orange); box-shadow: inset 0 0 0 2px var(--orange); }
.btn.danger { background: var(--red); box-shadow: 0 4px 0 #9b1612; }
#toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 99;
  transform: translate(-50%, 40px); opacity: 0; pointer-events: none;
  background: rgba(30, 20, 15, .92); color: #fff; padding: .6em 1.1em; border-radius: 12px;
  max-width: 90vw; text-align: center; transition: .25s;
}
#toast.show { transform: translate(-50%, 0); opacity: 1; }