/* Keyboard controls editor (js/ui/keyboardControls.js) and the two-player
 * controls choices. One scroll surface; 44px targets throughout. */
#keyboardControls{box-sizing:border-box;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:2px solid #103f4d;border-radius:18px;background:#fff7df;color:#103f4d;box-shadow:0 20px 90px #061a2b80;overflow:auto;overscroll-behavior:contain;font:14px/1.45 system-ui,sans-serif}
#keyboardControls::backdrop{background:#092a40b8;backdrop-filter:blur(4px)}
#keyboardControls .keysCard{padding:20px 22px 0;margin:0}
#keyboardControls header{display:flex;justify-content:space-between;align-items:center;gap:12px}
#keyboardControls h2{margin:3px 0 0;font:32px/1.1 var(--font-meme,Anton,Impact,sans-serif)}
#keyboardControls .keysEyebrow{margin:0;font-size:10px;letter-spacing:.13em;font-weight:800;color:#526c63}
#keyboardControls button{min-height:44px;padding:8px 12px;border:1px solid #8da4a0;border-radius:10px;background:#fffdf5;color:#103f4d;font:700 14px/1.3 system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
#keyboardControls button:focus-visible{outline:3px solid #ff9f1a;outline-offset:2px}
#keyboardControls .keysClose{flex:none;width:44px;padding:0;font-size:25px;border-radius:50%;background:#ffd853}
#keyboardControls .keysProfiles{display:flex;gap:8px;margin:16px 0 6px;flex-wrap:wrap}
#keyboardControls .keysProfiles button{flex:1 1 150px}
#keyboardControls .keysProfiles button[aria-pressed="true"]{background:#103f4d;border-color:#103f4d;color:#fff7df}
#keyboardControls .keysNote,#keyboardControls .keysFixed{margin:8px 0;font-size:12px;line-height:1.5;color:#456161}
#keyboardControls .keysTable{width:100%;border-collapse:collapse;margin:6px 0}
#keyboardControls .keysTable th,#keyboardControls .keysTable td{padding:4px 6px;text-align:left;vertical-align:middle;border-top:1px solid #d8dcc4}
#keyboardControls .keysTable thead th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#526c63;border-top:0}
#keyboardControls .keysTable tbody th{font-weight:700;min-width:8em}
#keyboardControls .keysTable small{font-weight:500;color:#6a7f7c}
#keyboardControls .keysSlot{display:inline-flex;gap:4px;align-items:center}
#keyboardControls .keysKey{min-width:96px;justify-content:center}
#keyboardControls .keysKey kbd{font:700 14px/1.2 system-ui,sans-serif}
#keyboardControls .keysEmpty{border-style:dashed;color:#56706c;background:transparent}
#keyboardControls .keysListening{background:#ffd853;border-color:#103f4d;animation:keysPulse 1s ease-in-out infinite}
#keyboardControls .keysClear{min-width:44px;padding:0;font-size:18px;border-radius:50%;background:transparent}
#keyboardControls .keysStatus{min-height:1.5em;margin:6px 0;font-weight:700}
#keyboardControls footer{position:sticky;bottom:0;display:flex;gap:10px;justify-content:space-between;margin:0 -22px;padding:12px 22px;background:#fff7df;border-top:1px solid #d8dcc4}
#keyboardControls .keysDone{background:#ffd853;border-color:#103f4d;min-width:120px}
@keyframes keysPulse{50%{box-shadow:0 0 0 4px #ffd85380}}
@media (prefers-reduced-motion:reduce){#keyboardControls .keysListening{animation:none}}
@media (max-width:520px){#keyboardControls .keysKey{min-width:72px}#keyboardControls .keysTable tbody th{min-width:0}}
/* Front screen: two-player controls */
#frontScreen .fs-controls-options button{flex:1 1 30%;min-width:96px}
#frontScreen .fs-padside-options{margin-top:8px}
#frontScreen [data-fs-controls-note]{white-space:pre-line}
/* Legacy menu (?frontScreen=0): the row shows only for 2 Players */
#rowLocalControls{display:none;grid-column:1/-1}
#menu.localPvp #rowLocalControls{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px 10px}
#menu.localPvp #rowLocalControls .menuLabel{flex:1 1 100%;text-align:left}
#menu:not(.padControls) #padSideSeg{display:none}
#localControlsHint{display:block;margin-top:3px;font-size:11px;font-weight:400;text-align:left;opacity:.8;max-width:34em}
/* Help: split-keyboard reference */
.helpTwoPlayerKeys{margin:10px 0}
.helpTwoPlayerKeys ul{margin:4px 0 6px}
.helpKeysButton{margin-left:6px;min-height:36px}
/* Short landscape screens (phones, small tablets with keyboards): more rows visible. */
@media (max-height:500px){#keyboardControls .keysCard{padding:10px 16px 0}#keyboardControls h2{font-size:22px}#keyboardControls .keysEyebrow{display:none}#keyboardControls .keysProfiles{margin:8px 0 2px}#keyboardControls .keysNote{margin:4px 0}#keyboardControls footer{margin:0 -16px;padding:8px 16px}}