/* Five letters: a board that fits a phone, and a keyboard that shows what you know. */
.wd-board{display:grid;gap:6px;justify-content:center;margin:14px 0 10px}
.wd-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.wd-cell{
  width:var(--wd-size);height:var(--wd-size);
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--wd-size) * .46);line-height:1;
  border:2px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);
  transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
:root{--wd-size:52px}
@media (min-width:760px){:root{--wd-size:62px}}
.wd-cell.typed{border-color:var(--text-3);transform:scale(1.03)}
.wd-cell.done{animation:wd-flip 420ms var(--ease-out) both;color:#fff;border-color:transparent}
.wd-cell.hit{background:var(--green)}
.wd-cell.near{background:var(--amber);color:#202124}
.wd-cell.miss{background:#9AA0A6}
@keyframes wd-flip{
  0%{transform:rotateX(0)}
  50%{transform:rotateX(90deg)}
  100%{transform:rotateX(0)}
}
.wd-row.active .wd-cell{border-color:var(--line-2)}

.wd-note{min-height:24px;text-align:center;font-size:13px;color:var(--red)}

.wd-keys{display:grid;gap:6px;margin:8px auto 0;max-width:560px}
.wd-keyrow{display:flex;gap:5px;justify-content:center}
.wd-key{
  -webkit-appearance:none;appearance:none;font:inherit;cursor:pointer;
  flex:1 1 auto;min-width:0;max-width:44px;height:48px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;border-radius:6px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.wd-key.wide{max-width:72px;flex:0 0 auto;padding:0 10px;font-size:12px;color:var(--blue)}
.wd-key:active{transform:scale(.96)}
.wd-key.hit{background:var(--green);border-color:transparent;color:#fff}
.wd-key.near{background:var(--amber);border-color:transparent;color:#202124}
.wd-key.miss{background:#DADCE0;border-color:transparent;color:var(--text-2)}

.wd-answer{font-size:34px;letter-spacing:.12em;color:var(--text);margin:4px 0 10px}