/* Letters are only ever black or white. Fills: green = right place, orange = in the word
   elsewhere, dark grey = not in the word. */
:root {
  color-scheme: light;
  --white: #fff; --black: #000;           /* fixed: letters on coloured fills */
  --bg: #fff; --fg: #000;                 /* page and ordinary text */
  --green: #4a7c59; --orange: #d4a853; --grey: #52575d;
  --action: #5d5f8a;                     /* new-game button; no game state uses this hue */
  --bad: #a94442;                        /* keyboard only: letter known to be absent */
  --line: #d1d5db; --key: #e5e7eb; --note: #000;  /* --note: legal notice text */
}
/* black-and-white mode; data-theme is set by the script in index.html and the toggle in ui.js */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000; --fg: #fff; --grey: #2a2d31; --line: #3a3a3c; --key: #4a4d52; --note: #767b80;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  padding: max(.5rem, env(safe-area-inset-top)) 16px max(8px, env(safe-area-inset-bottom));
  background: var(--bg); color: var(--fg);
  font: 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
}
main { flex: 1; width: 100%; max-width: 28rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
/* the title stays for screen readers but takes no room, so the page fits without scrolling */
h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#diff { min-height: 1.1rem; font-size: .85rem; font-weight: 600; color: var(--fg); }
#msg { min-height: 1.5rem; text-align: center; font-weight: 600; }

#grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: min(100%, 22rem, calc((100dvh - 23.7rem) * 5 / 6)); }
.t {
  aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--line);
  font-size: 1.6rem; font-weight: 700; text-transform: uppercase;
}
.t.f { border-color: var(--fg); }
.t.c, .t.p, .t.a { border-color: transparent; }
.t.c { background: var(--green); color: var(--white); }
.t.p { background: var(--orange); color: var(--black); }
.t.a { background: var(--grey); color: var(--white); }

#new { margin: auto 0;  /* centred in the free space between the grid and the keyboard */
  padding: .5rem 1.25rem; border: 0; border-radius: 4px; background: var(--action); color: var(--white); font: inherit; font-size: 1.06rem; font-weight: 700; }

#theme {
  margin: 0 0 -.25rem; align-self: flex-end; width: 1.75rem; height: 1.75rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--fg); font: inherit; font-size: 1.1rem; line-height: 1;
}
#kb { width: 100%; display: grid; gap: 6px; }
.r { display: grid; grid-template-columns: repeat(18, 1fr); gap: 4px; }
#kb button {
  grid-column: span 2; height: 2.9rem; padding: 0; border: 0; border-radius: 4px;
  background: var(--key); color: var(--fg); font: inherit; font-weight: 700; text-transform: uppercase;
}
#kb .w { grid-column: span 3; font-size: .7rem; }
#kb .c { background: var(--green); color: var(--white); }
#kb .p { background: var(--orange); color: var(--black); }
#kb .a { background: var(--bad); color: var(--white); }

#credit { margin-top: .5rem; font-size: .7rem; line-height: 1.3; text-align: center; user-select: text; color: var(--note); }
#credit a { color: var(--note); }

/* Milestone 4: flip/shake animations. */