/* Uncopyrightable — shared look: typewriter paper. No external fonts: the
   face is served from /fonts (see fonts/README.md). */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/special-elite-latin.woff2) format('woff2');
}

:root {
  --paper: #f3efe4;
  --card: #fffdf7;
  --ink: #222;
  --muted: #6b665c;
  --line: #333;
  --soft: #d9d3c4;
  --green: #8fd694;
  --green-dark: #1f6b2a;
  --gold: #f2c14e;
  --red: #b33a3a;
  --type: 'Special Elite', 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--type);
  background: var(--paper);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
button {
  font-family: var(--type);
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--ink); color: var(--paper); }
button.go { background: var(--green); }
button.warn { background: var(--card); color: var(--red); border-color: var(--red); }
button.gold { background: var(--gold); }
[hidden] { display: none !important; }

.key {
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--line); border-radius: 8px;
  font-weight: bold; user-select: none;
}
.key.mine      { background: #fff; }
.key.vowel     { background: var(--green); }
.key.inword    { background: var(--green-dark); color: #fff; }
.key.spent     { background: var(--soft); color: var(--muted); border-style: dashed; }
.key.played    { background: var(--ink); color: var(--paper); }
.key.theirs    { background: var(--soft); color: var(--muted); }
.key.scored::after { content: '✓'; font-size: .5em; margin-left: .1em; vertical-align: super; }
.key.legal     { cursor: pointer; box-shadow: 0 3px 0 var(--line); }
.key.legal:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }

.badge {
  display: inline-block; font-size: .72em; padding: 1px 6px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--card); white-space: nowrap;
}
.badge.bot { background: #cfd8ff; }
.badge.cover { background: var(--gold); }
.badge.off { background: #eee; color: var(--muted); }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }