@font-face { font-family: "SG"; src: url("/fonts/space-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "SG"; src: url("/fonts/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Jumble: a deep crimson field, cream letter tiles, gold for points. Middlish's type and seat chips,
   its own ground and its own object: the tile. */
:root {
  --field: #3d0619;
  --field-hi: #631029;
  --deep: #2a0411;
  --panel: #4f0b23;
  --line: #7d2645;
  --ink: #fff4e3;
  --dim: #e3a3b6;
  --tile: #f7ebd3;
  --tile-ink: #33071a;
  --tile-edge: #c9a978;
  --gold: #ffd23f;
  --gold-edge: #b8901a;
  --ok: #5fe08a;
  --bad: #ff4b4b;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--field); color: var(--ink); font-family: "SG", system-ui, sans-serif; }
button, input { font: inherit; color: inherit; }
.hide { display: none !important; }

/* the tile: a cream square with a letter, a lip under it */
.tile { display: inline-block; vertical-align: middle; position: relative; background: var(--tile); color: var(--tile-ink); font-weight: 700; text-align: center; border-radius: 0.14em; box-shadow: 0 0.08em 0 var(--tile-edge), 0 0.16em 0.3em rgba(20, 0, 8, 0.45); text-transform: uppercase; }
.tile.gap { background: transparent; box-shadow: none; color: var(--tile); border: 0.06em dashed rgba(247, 235, 211, 0.55); }
.tile.slot { background: rgba(247, 235, 211, 0.12); box-shadow: inset 0 -0.06em 0 rgba(247, 235, 211, 0.4); }
.tile.and { background: transparent; box-shadow: none; color: var(--dim); }
.av { display: inline-block; vertical-align: middle; border-radius: 50%; text-align: center; font-weight: 700; color: var(--deep); }
.tile { width: 1em; height: 1em; margin: 0 0.07em; }
.tile b { display: block; font-size: 0.66em; line-height: 1.515em; }
.tile.gap { width: 1.5em; }
.tile.and { width: 0.7em; }
.wordmark { white-space: nowrap; }