/* A live, nonmodal reference. Only the keyboard card intercepts the pointer. */
#kbRoot { position:fixed; inset:0; z-index:1800; pointer-events:none; font-family:var(--font-family, system-ui, sans-serif); }
#kbRoot *, #kbRoot *::before, #kbRoot *::after { box-sizing:border-box; }
#kbRoot .kb-toggle { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; height:32px; padding:0 12px 0 7px; border:1px solid #b6d6ed29; border-radius:7px; color:#d1dfe9; background:#111e2bd9; font:500 11px/1 var(--font-family, system-ui, sans-serif); cursor:pointer; pointer-events:auto; box-shadow:0 3px 12px #0002; }
#kbRoot .kb-toggle > span { display:grid; place-items:center; width:20px; height:20px; border:1px solid #b6d6ed38; border-radius:4px; font-size:12px; }
/* Touch has no Q key — the pill is simply tapped, so drop the key cap. */
.is-mobile #kbRoot .kb-toggle { padding:0 14px; }
.is-mobile #kbRoot .kb-toggle > span { display:none; }
body:not(.resort-hud-active) #kbToggle, #kbRoot:has(.kb-panel:not(.hidden)) #kbToggle { visibility:hidden; }
#kbRoot .kb-panel { position:absolute; left:50%; bottom:64px; transform:translateX(-50%); width:min(1100px, calc(100vw - 48px)); min-width:0; max-width:none; max-height:calc(100dvh - 96px); overflow:auto; margin:0; padding:24px; border:1px solid #b6d6ed36; border-radius:16px; background:linear-gradient(145deg, #172737f5, #0d1824f7); color:#e6eff6; box-shadow:0 22px 70px #020b1666, inset 0 1px #e1f4ff0a; backdrop-filter:blur(16px); pointer-events:auto; animation:kbReveal 140ms ease-out; }
#kbRoot .kb-panel.hidden { display:none; }
#kbRoot .kb-header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 22px; font:inherit; color:inherit; }
#kbRoot .kb-eyebrow { color:#8ba6ba; font-size:9px; font-weight:650; letter-spacing:2px; line-height:1; margin-bottom:8px; }
#kbRoot .kb-eyebrow span { color:#587187; padding:0 5px; }
#kbRoot h2 { margin:0; font-size:23px; line-height:1.2; font-weight:600; letter-spacing:-.65px; color:#f1f6fa; text-transform:none; }
#kbRoot .kb-header-actions { display:flex; gap:18px; align-items:center; }
#kbRoot .kb-context { display:flex; align-items:center; gap:7px; color:#c3d6e5; font-size:11px; white-space:nowrap; }
#kbRoot .kb-context::before { content:''; width:5px; height:5px; border-radius:50%; background:#9bdcc9; }
#kbRoot .kb-close { display:grid; place-items:center; width:30px; height:30px; padding:0; color:#adc1d1; background:#d0e6f908; border:1px solid #b6d6ed1c; border-radius:6px; font:22px/1 system-ui; cursor:pointer; }
#kbRoot .kb-close:hover, #kbRoot .kb-toggle:hover { color:#fff; background:#2b4153; }
#kbRoot .kb-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; }
#kbRoot .kb-legend { display:flex; flex-wrap:wrap; gap:18px; }
#kbRoot [data-group="move"] { --kb-color:#b7e2d5; --kb-tint:#84ceb51a; --kb-edge:#8bd7bd42; }
#kbRoot [data-group="action"] { --kb-color:#ecd6b0; --kb-tint:#d4b27916; --kb-edge:#dcc18e38; }
#kbRoot [data-group="nav"] { --kb-color:#b7d8f5; --kb-tint:#87bdec1a; --kb-edge:#8cbeed42; }
#kbRoot [data-group="social"] { --kb-color:#d7c8ec; --kb-tint:#b5a0da1a; --kb-edge:#bda3dd42; }
#kbRoot .kb-legend > span { display:flex; align-items:center; gap:6px; color:#b0c1ce; font-size:10px; }
#kbRoot .kb-legend > span::before { content:''; width:5px; height:5px; background:var(--kb-color); border-radius:2px; }
#kbRoot .kb-layout-note { color:#728ca1; font-size:9px; letter-spacing:1.4px; }
#kbRoot .kb-list { display:block; }
#kbRoot .kb-keyboard-scroll { overflow-x:auto; scrollbar-width:thin; scrollbar-color:#526b80 transparent; padding:2px 2px 8px; }
#kbRoot .kb-keyboard { display:grid; grid-template-columns:15fr 3fr; gap:16px; min-width:1000px; padding:12px; border:1px solid #adcde51a; border-radius:10px; background:#07121c66; box-shadow:inset 0 1px 8px #02091224; }
#kbRoot .kb-main { min-width:0; display:grid; gap:5px; }
#kbRoot .kb-row { display:grid; grid-template-columns:repeat(60, minmax(0, 1fr)); gap:0; column-gap:0; margin:0 -2.5px; }
#kbRoot .kb-cap { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; min-width:0; height:46px; margin:0 2.5px; padding:6px 4px; border:1px solid #9cbacf18; border-bottom-color:#040c1466; border-radius:5px; background:linear-gradient(#2637465c, #1d2d3b5c); box-shadow:0 2px 0 #020b1366, inset 0 1px #d3e8f906; color:#738a9c; text-align:left; font-family:inherit; line-height:1; cursor:default; appearance:none; transition:background 100ms, border-color 100ms; }
#kbRoot .kb-cap.is-bound { color:var(--kb-color); background:var(--kb-tint); border-color:var(--kb-edge); }
#kbRoot .kb-cap-letter { font-size:12px; font-weight:600; line-height:1; white-space:nowrap; }
#kbRoot .kb-cap-modifier { position:absolute; top:7px; right:4px; font-size:7px; opacity:.8; }
#kbRoot .kb-cap-label { font-size:9px; font-weight:500; line-height:1.05; white-space:nowrap; letter-spacing:-.15px; }
#kbRoot .kb-cap[data-key="SPACE"] { align-items:center; }
#kbRoot .kb-cap[data-key="P"] { padding-inline:3px; }
#kbRoot .kb-cap[data-key="Backspace"] .kb-cap-letter { font-size:10px; }
#kbRoot .kb-cap:hover.is-bound, #kbRoot .kb-cap.pressed { background:#3b5265; border-color:var(--kb-color); }
#kbRoot .kb-function-row { display:grid; grid-template-columns:repeat(60, minmax(0, 1fr)); margin:0 -2.5px 7px; }
#kbRoot .kb-function-row .kb-cap { height:35px; padding:5px; }
#kbRoot .kb-function-row .kb-cap-letter { font-size:10px; }
#kbRoot .kb-function-row .kb-cap-label { font-size:8px; }
#kbRoot .kb-nav { display:grid; grid-template-rows:35px 97px 1fr 97px; gap:12px; min-width:0; }
#kbRoot .kb-nav-functions, #kbRoot .kb-nav-six, #kbRoot .kb-arrows { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:5px; }
#kbRoot .kb-nav .kb-cap { grid-column:span 1 !important; margin:0; }
#kbRoot .kb-nav-functions .kb-cap { height:35px; padding:6px 4px; }
#kbRoot .kb-nav-functions .kb-cap-letter, #kbRoot .kb-nav-six .kb-cap-letter { font-size:9px; font-weight:500; }
#kbRoot .kb-arrows { grid-row:4; }
#kbRoot .kb-mouse-strip { display:flex; flex-wrap:wrap; gap:10px 24px; padding:10px 2px 12px; color:#aabecd; font-size:10px; line-height:1.5; }
#kbRoot .kb-mouse-strip:empty { display:none; }
#kbRoot .kb-mouse-strip > span { display:flex; align-items:center; gap:7px; }
#kbRoot kbd { font:inherit; color:#cfdfeb; }
#kbRoot .kb-mouse-strip kbd { color:#e1ebf3; font-weight:550; }
#kbRoot .kb-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:42px; border-top:1px solid #b6d6ed1a; padding-top:12px; color:#a1b7c8; font-size:11px; line-height:1.5; }
#kbDetail { max-width:83%; }
#kbRoot .kb-dismiss { white-space:nowrap; color:#7f99ad; font-size:10px; }
#kbRoot .kb-dismiss kbd { display:inline-block; border:1px solid #b6d6ed29; border-radius:3px; padding:0 4px; margin-right:2px; }
#kbRoot :focus-visible { outline:2px solid #c5e5ff; outline-offset:3px; }
@keyframes kbReveal { from { opacity:0; translate:0 6px; } to { opacity:1; translate:0 0; } }
@media (max-width:700px) {
  #kbRoot .kb-panel { width:calc(100vw - 20px); bottom:12px; max-height:calc(100dvh - 24px); padding:17px 14px 12px; border-radius:12px; }
  #kbRoot .kb-header { margin-bottom:18px; gap:8px; }
  #kbRoot h2 { font-size:20px; }
  #kbRoot .kb-header-actions { gap:9px; }
  #kbRoot .kb-context { max-width:100px; white-space:normal; font-size:10px; }
  #kbRoot .kb-legend { gap:12px; }
  #kbRoot .kb-layout-note { display:none; }
  #kbRoot .kb-footer { align-items:flex-start; gap:10px; }
  #kbDetail { max-width:72%; }
}
@media (prefers-reduced-motion:reduce) {
  #kbRoot .kb-panel { animation:none; }
  #kbRoot .kb-cap { transition:none; }
}