#h5-builtin-keyboard {
  position: fixed; top: 0; left: 0; right: auto; bottom: auto;
  margin: 0; border: 0; max-width: none; max-height: none; overflow: hidden;
  z-index: 2147483000; transform-origin: 0 0; isolation: isolate;
  opacity: 1; visibility: visible; pointer-events: auto;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  box-sizing: border-box; padding: 8px;
  background: rgba(9, 4, 24, .66); color: #fff3d4;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
#h5-builtin-keyboard::backdrop { background: transparent; pointer-events: none; }
#h5-builtin-keyboard[hidden] { display: none !important; }
#h5-builtin-keyboard [hidden] { display: none !important; }
#h5-builtin-keyboard * { box-sizing: border-box; }
#h5-builtin-keyboard .vk-panel {
  width: 100%; max-width: 960px; max-height: 100%; overflow: auto;
  padding: 10px 12px; border: 1px solid #c49b53; border-radius: 14px;
  background: linear-gradient(145deg, #372445, #21182e 70%);
  box-shadow: 0 -4px 30px rgba(0, 0, 0, .5);
  font-size: var(--vk-font, 17px);
}
#h5-builtin-keyboard .vk-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
#h5-builtin-keyboard .vk-title { flex: 1; font-weight: bold; color: #ffe2a0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#h5-builtin-keyboard .vk-count { color: #b9acbf; font-size: .8em; }
#h5-builtin-keyboard button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; border: 1px solid #63506f; border-radius: 7px;
  color: #fff1d7; background: linear-gradient(#574063, #3d2c49);
  font: inherit; padding: 0 8px; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#h5-builtin-keyboard button:active { background: #846441; border-color: #f8d88b; }
#h5-builtin-keyboard button:focus-visible { outline: 2px solid #ffe2a0; outline-offset: 1px; }
#h5-builtin-keyboard button[disabled] { opacity: .35; cursor: default; }
#h5-builtin-keyboard .vk-small { height: 28px; font-size: .82em; }
#h5-builtin-keyboard .vk-preview {
  display: flex; align-items: center; height: 38px; overflow-x: auto;
  padding: 0 10px; background: #151020; border: 1px solid #8c6a46;
  border-radius: 7px; font-size: 1.08em; white-space: pre; font-family: monospace;
  cursor: text; touch-action: pan-x;
}
#h5-builtin-keyboard .vk-char { display: inline-block; flex: 0 0 auto; }
#h5-builtin-keyboard .vk-selected { background: #8b6bb5; }
#h5-builtin-keyboard .vk-caret { flex: 0 0 2px; width: 2px; height: 1.2em; background: #ffd982; }
#h5-builtin-keyboard .vk-placeholder { color: #99899f; }
#h5-builtin-keyboard .vk-tools { display: flex; gap: 6px; margin: 6px 0; }
#h5-builtin-keyboard .vk-status { flex: 1; min-width: 0; color: #c9b9d2; font-size: .76em; align-self: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#h5-builtin-keyboard .vk-candidates { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; min-height: 29px; }
#h5-builtin-keyboard .vk-pinyin { color: #ffda91; min-width: 45px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-size: .86em; }
#h5-builtin-keyboard .vk-options { display: flex; gap: 5px; flex: 1; overflow-x: auto; }
#h5-builtin-keyboard .vk-options button { flex: 0 0 auto; height: 28px; background: #463348; }
#h5-builtin-keyboard .vk-row { display: flex; gap: 5px; margin-top: 5px; }
#h5-builtin-keyboard .vk-key { flex: 1; height: var(--vk-key-height, 42px); }
#h5-builtin-keyboard .vk-wide { flex: 1.6; font-size: .85em; }
#h5-builtin-keyboard .vk-space { flex: 4; font-size: .85em; }
#h5-builtin-keyboard .vk-done { flex: 1.8; color: #24162e; background: linear-gradient(#ffe4a3, #d3a44c); border-color: #f4d68c; font-weight: bold; }
#h5-builtin-keyboard .vk-numeric { max-width: 500px; margin: auto; }

/* Half-height layout: coordinates follow the game's orientation. */
#h5-builtin-keyboard { padding: 3px; background: transparent; }
#h5-builtin-keyboard .vk-panel {
  height: 100%; padding: 4px 8px; overflow: hidden; border-radius: 10px;
  display: grid; grid-template-columns: minmax(245px, .8fr) minmax(0, 1fr);
  grid-template-rows: 25px 23px minmax(0, 1fr); gap: 3px 6px;
}
#h5-builtin-keyboard .vk-header { grid-column: 1 / -1; gap: 6px; margin: 0; min-width: 0; }
#h5-builtin-keyboard .vk-title { flex: 0 1 auto; max-width: 110px; font-size: .8em; }
#h5-builtin-keyboard .vk-preview { flex: 1; min-width: 0; height: 25px; padding: 0 6px; font-size: .95em; }
#h5-builtin-keyboard .vk-count { font-size: .7em; }
#h5-builtin-keyboard .vk-small { height: 23px; padding: 0 6px; }
#h5-builtin-keyboard .vk-tools { grid-column: 1; grid-row: 2; gap: 4px; margin: 0; min-width: 0; }
#h5-builtin-keyboard .vk-status { font-size: .66em; }
#h5-builtin-keyboard .vk-candidates { grid-column: 2; grid-row: 2; min-height: 0; min-width: 0; margin: 0; gap: 3px; }
#h5-builtin-keyboard .vk-pinyin { min-width: 30px; max-width: 75px; font-size: .75em; }
#h5-builtin-keyboard .vk-options { min-width: 0; gap: 3px; }
#h5-builtin-keyboard .vk-options button { height: 23px; padding: 0 5px; font-size: .8em; }
#h5-builtin-keyboard .vk-keys {
  grid-column: 1 / -1; grid-row: 3; min-height: 0; width: 100%;
  display: flex; flex-direction: column; gap: 3px;
}
#h5-builtin-keyboard .vk-row { flex: 1; min-height: 0; gap: 4px; margin: 0; }
#h5-builtin-keyboard .vk-key { height: 100%; min-height: 0; }
#h5-builtin-keyboard .vk-numeric { max-width: 500px; margin: 0 auto; }
#h5-builtin-keyboard.vk-narrow .vk-panel { grid-template-columns: 1fr; grid-template-rows: 28px 25px 25px minmax(0, 1fr); }
#h5-builtin-keyboard.vk-narrow .vk-tools { grid-column: 1; grid-row: 2; }
#h5-builtin-keyboard.vk-narrow .vk-candidates { grid-column: 1; grid-row: 3; }
#h5-builtin-keyboard.vk-narrow .vk-keys { grid-row: 4; }
#h5-builtin-keyboard.vk-narrow .vk-title { max-width: 65px; }
