/* below the cabinet: touch pad, controls card, notes */
.controls{background:var(--panel);border:3px solid #000;box-shadow:4px 4px 0 #000;padding:12px 14px;display:grid;gap:10px;min-width:0}
.controls table{border-collapse:collapse;width:100%;font-size:14px;line-height:normal}
.controls th,.controls td{padding:5px 8px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.controls thead th{font-family:var(--display);font-weight:400;font-size:9px;text-transform:uppercase}
.controls .c1{color:var(--p1)}.controls .c2{color:var(--p2)}
.controls tbody th{font-weight:600;color:var(--muted)}
.controls kbd{margin-right:3px}
.controls .hints{margin:0;font-size:13px;color:var(--muted);line-height:1.8}
.pad{display:flex;justify-content:space-between;gap:8px;user-select:none;-webkit-user-select:none;touch-action:none}
.pad div{display:grid;grid-template-columns:repeat(3,minmax(44px,56px));gap:4px;flex:0 1 auto}
.pad button{font-family:var(--display);font-size:12px;height:52px;min-width:44px;padding:0;border-radius:0;border:3px solid #000;background:var(--panel);color:var(--fg);touch-action:none;box-shadow:3px 3px 0 #000}
.pad .atk button{border-radius:50%;background:var(--hot);color:#fff}
.pad .atk button:first-child{background:var(--accent);color:#000}
.pad .atk button:last-child{background:var(--p1);color:#000}
.pad button.down{transform:translate(3px,3px);box-shadow:none;filter:brightness(1.3)}
kbd{font-family:var(--body);font-weight:700;font-size:13px;background:var(--bg);border:2px solid var(--line);border-bottom-width:4px;padding:0 6px;white-space:nowrap}
.note{color:var(--muted);font-size:13px;margin:0}