/* The school's game look, shared by the table (style.css) and every page (site.css) (19 Oct 2026, from the phone
   mock-ups Jeff approved: "a more polished look like this is the way to go"). One place for the colours, the two
   fonts, the glossy buttons, the chips and the glass panels, so the phone app, phone browsers and computers match.
   Fonts: Lilita One for headings, names, chips and buttons (SIL OFL, fonts/LilitaOne-OFL.txt); Atkinson Hyperlegible
   for sentences, kept for players over 50. */

@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/lilita-one-400.woff2?v=51e15cc0a0") format("woff2"); }

:root {
  /* the felt, the night around it, the gold and the cream */
  --g-felt-top: #1f6a45;
  --g-felt: #155236;
  --g-felt-deep: #0b3322;
  --g-night: #08241a;
  --g-gold-1: #ffe9a3;
  --g-gold-2: #f6c443;
  --g-gold-3: #d68c12;
  --g-gold-ledge: #9a5f07;
  --g-gold-ink: #3a2606;
  --g-green-1: #3c6f57;
  --g-green-2: #1d4a37;
  --g-green-3: #123528;
  --g-green-ledge: #0a2018;
  --g-cream: #fff6e2;
  --g-cream-soft: rgba(255, 246, 226, 0.78);
  --g-ruby: #d9354a;
  --g-jade: #33c48d;
  --g-glass: rgba(8, 36, 26, 0.72);
  --g-glass-strong: rgba(6, 28, 19, 0.86);
  --g-line: rgba(255, 233, 163, 0.35);
  --g-wood-1: #b07a45;
  --g-wood-2: #8a5629;
  --g-wood-3: #5e3615;
  /* rarity, as the coin games show it */
  --g-common-1: #7d8f86; --g-common-2: #4a5a52;
  --g-rare-1: #4aa3ff;   --g-rare-2: #1d5fb8;   --g-rare-glow: rgba(74, 163, 255, 0.55);
  --g-epic-1: #b26bff;   --g-epic-2: #6526b8;   --g-epic-glow: rgba(178, 107, 255, 0.6);
  --g-legend-1: #ffd860; --g-legend-2: #d4840f; --g-legend-glow: rgba(255, 210, 90, 0.75);
  /* shape and type */
  --g-radius: 18px;
  --g-radius-sm: 12px;
  --g-font-display: "Lilita One", "Atkinson Hyperlegible", ui-rounded, system-ui, sans-serif;
  --g-font-body: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* the felt with its lamp: clear in the middle, dark at the edges, over the felt picture */
  --g-felt-bg:
    radial-gradient(120% 90% at 50% 30%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45) 100%),
    url("/art/felt.webp?v=51e15cc0a0") center / cover,
    linear-gradient(180deg, var(--g-felt-top), var(--g-felt-deep));
}

/* Text size (1 Nov; textsize.js): the player's step multiplies the root font size, so every word written in rem grows
   with it, on the table and on every page. The tiles are written in pixels and keep their size. site.css sets its own
   root size on a wide screen and multiplies it the same way. */
html { font-size: calc(100% * var(--text, 1)); }
/* --chrome undoes all but 15% of the step, for the few labels in fixed-size chips on a phone (the table's bar and the
   players' name plates, style.css): at Largest a name plate's name was cut to "Ber..." and Find real players ran out
   of its chip. calc(1rem * var(--chrome)) is 16 px at Normal and never more than 18.4 px. */
:root { --chrome: calc(min(var(--text, 1), 1.15) / var(--text, 1)); }

/* --- the glossy buttons: gold for the main action, deep green for the others ------------------------------------- */
.g-btn, .g-btn-green {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 400 1.1rem/1 var(--g-font-display); letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  padding: 0.75em 1.4em; border: 0; border-radius: 16px;
  transition: transform 90ms ease, filter 120ms ease;
}
.g-btn {
  color: var(--g-gold-ink);
  background: linear-gradient(180deg, var(--g-gold-1) 0%, var(--g-gold-2) 48%, var(--g-gold-3) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.7), inset 0 -3px 0 rgba(120, 70, 0, 0.3), 0 5px 0 var(--g-gold-ledge), 0 10px 18px rgba(0, 0, 0, 0.35);
}
.g-btn-green {
  color: var(--g-cream);
  background: linear-gradient(180deg, var(--g-green-1) 0%, var(--g-green-2) 55%, var(--g-green-3) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.22), 0 4px 0 var(--g-green-ledge), 0 8px 14px rgba(0, 0, 0, 0.3);
}
.g-btn:hover, .g-btn-green:hover { filter: brightness(1.06); }
.g-btn:active, .g-btn-green:active { transform: translateY(2px) scale(0.97); }
.g-btn:focus-visible, .g-btn-green:focus-visible { outline: 3px solid #8fd0ff; outline-offset: 3px; }
.g-btn[disabled], .g-btn-green[disabled] { filter: saturate(0.3) brightness(0.8); cursor: default; transform: none; }

/* --- chips (coins, the day streak, the wall), glass panels and nameplates ------------------------------------------- */
.g-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 246, 226, 0.18); color: var(--g-cream);
  font: 400 1rem/1 var(--g-font-display); white-space: nowrap;
}
.g-coin { width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #f6c443 55%, #b37a0c); box-shadow: inset 0 0 0 2px rgba(120, 70, 0, 0.45); }
.g-glass { background: var(--g-glass); border: 1px solid var(--g-line); border-radius: var(--g-radius); color: var(--g-cream);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32); backdrop-filter: blur(6px); }
.g-title { font: 400 1.6rem/1.1 var(--g-font-display); color: var(--g-cream); letter-spacing: 0.01em; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .g-btn, .g-btn-green { transition: none; }
}