/* ============================================================
   Connect the Thoughts — shared on-screen game keyboard (arcade-keys.js).
   Compact, token-styled, Wordle-proportioned. A digits board is ~2 rows
   (~100px); the alpha board is 3 rows (~150px) — roughly a third of the
   native keyboard, and the layout never reflows because of it.
   ============================================================ */

.ak-keys {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.ak-row {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.ak-key {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elev);
  color: var(--fg);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.ak-key:active { background: var(--border); transform: scale(0.96); }
.ak-key:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Function + action keys get more width. */
.ak-key--fn { flex: 1.4 1 0; color: var(--fg-muted); }
.ak-key--enter {
  flex: 2.2 1 0;
  background: var(--accent);
  color: var(--bg);
  border-color: transparent;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ak-key--enter:disabled { opacity: 0.5; cursor: not-allowed; }

/* Digits board: the second row is just [⌫][action] — let it breathe. */
.ak-keys--digits .ak-row:last-child .ak-key--fn { flex: 1 1 0; }
.ak-keys--digits .ak-row:last-child .ak-key--enter { flex: 3 1 0; height: 44px; font-size: 15px; }

/* Phones: shorter keys buy the question + clues more room. */
@media (max-width: 767px) {
  .ak-keys { gap: 4px; }
  .ak-row { gap: 4px; }
  .ak-key { height: 40px; }
  .ak-keys--digits .ak-row:last-child .ak-key--enter { height: 42px; }
}