/* Shared by the start screen and the game page. */
:root {
  --ink: #2b1a24;          /* warm plum-black */
  --cream: #fff6e8;
  --apple: #d63a3a;
  --apple-dark: #9c2430;
  --leaf: #56a048;
  --peach: #f0965a;
  --scrim: rgba(24, 12, 20, 0.62);
  --radius: 14px;
  --font: 'Barlow', system-ui, sans-serif;
  --bg-image: none;        /* each game sets its own background in its own css (css/<game>.css) */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100dvh;
  background: var(--ink) var(--bg-image) center / cover no-repeat;
  overscroll-behavior: none;
}

[hidden] { display: none !important; }

.btn {
  font: 700 1.05rem/1 var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--apple);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 4px 0 var(--ink);
  padding: 0.8em 1.4em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:hover { background: #e24848; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--peach); outline-offset: 3px; }
.btn:disabled { opacity: 0.6; cursor: default; }

.btn.quiet { background: var(--cream); color: var(--ink); }
.btn.quiet:hover { background: #fff; }

.btn.icon {
  padding: 0.55em 0.8em;
  font-size: 0.9rem;
  min-height: 44px;          /* Apple's 44 pt tap target; Android's is 48 dp, which the padding covers */
  min-width: 44px;
  justify-content: center;
}
.btn svg { width: 1.2em; height: 1.2em; flex: none; }