/* The controller's on-screen keyboard (js/game/padKeyboard.js): a panel over the bottom of the screen, a shade over
   the rest of the page so the d-pad stays on the keys. Under the controller's pointer (css/gamepad.css). */
.pad-keyboard-shade {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 16px;
  background: color-mix(in srgb, var(--bg, #0c0b08) 45%, transparent);
}
.pad-keyboard {
  width: min(640px, 100%);
  background: var(--bg-panel, #15130d);
  border: 1px solid var(--accent, #ffb000);
  border-radius: var(--radius, 2px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono);
}
.pad-keyboard-preview {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line, #3a3018);
  background: var(--bg-sunk, #080705);
  color: var(--ink, #ffcf7a);
  font-size: calc(18px * var(--ui-scale));
  letter-spacing: .06em;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pad-keyboard-preview::after {
  content: '';
  display: inline-block;
  width: .6em;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.2em;
  background: var(--accent, #ffb000);
}
.pad-keyboard-row {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.pad-key {
  flex: 1 1 0;
  max-width: 56px;
  min-height: 38px;
  font-family: var(--mono);
  font-size: calc(16px * var(--ui-scale));
  color: var(--ink, #ffcf7a);
  background: none;
  border: 1px solid var(--line, #3a3018);
  border-radius: var(--radius, 2px);
  cursor: var(--cursor-hand, pointer);
}
.pad-key:hover { border-color: var(--accent, #ffb000); color: var(--accent, #ffb000); }
.pad-key-wide { max-width: calc(200px * var(--ui-scale)); flex-grow: 3; }
.pad-key-done { color: var(--accent-ink, #0c0b08); background: var(--accent, #ffb000); border-color: var(--accent, #ffb000); font-weight: 700; }
.pad-key-done:hover { color: var(--accent-ink, #0c0b08); }
.pad-key-space::after {
  content: '';
  display: inline-block;
  width: 40%;
  height: 6px;
  border: 2px solid currentColor;
  border-top: none;
}
.pad-keyboard[data-layout="code"] { width: min(260px, 100%); }
@media (max-height: 420px) {
  .pad-key { min-height: 30px; font-size: calc(14px * var(--ui-scale)); }
  .pad-keyboard-preview { min-height: 28px; font-size: calc(15px * var(--ui-scale)); }
}