.controls-panel {
  margin-top: 20px;
  border: 1px solid #829d87;
  border-radius: 5px;
  background: #0b1d1b;
  color: #e8e9d0;
  font: 14px/1.45 system-ui, sans-serif;
}

.controls-panel > summary {
  box-sizing: border-box;
  min-height: 44px;
  padding: 11px 12px;
  color: #ffe7b6;
  font-weight: 650;
  cursor: pointer;
}

.controls-panel-body { padding: 0 10px 10px; min-width: 0; }
.controls-panel p { margin: 8px 0; }
.controls-intro, .controls-mode-help, .controls-reserved, .controls-storage-status { color: #c4d3c5; font-size: 12px; }
.controls-fire-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 650; }
.controls-fire-mode select {
  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid #829d87;
  border-radius: 3px;
  background: #102e2b;
  color: #f0f3df;
  font: 14px/1.3 system-ui, sans-serif;
}

.controls-status { color: #ffe2a3; font-size: 13px; overflow-wrap: anywhere; }
.controls-status[data-error="true"] { color: #ffcead; }
.controls-panel button {
  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;
  border: 1px solid #829d87;
  border-radius: 3px;
  padding: 8px;
  background: #12332e;
  color: #f0f3df;
  font: 13px/1.3 system-ui, sans-serif;
  overflow-wrap: anywhere;
}
.controls-panel button:hover { background: #1b463e; }
.controls-panel button[data-capturing="true"] { border-color: #ffd166; background: #413a20; color: #fff0b9; }
.controls-panel :is(button, select, summary):focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
.controls-panel button[hidden] { display: none; }
.controls-cancel { margin: 0 0 8px; }
.controls-bindings-scroll {
  max-height: min(360px, 55dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 3px;
}
.controls-bindings { width: 100%; table-layout: fixed; border-spacing: 0 5px; }
.controls-bindings th { width: 26%; padding: 3px; text-align: left; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.controls-bindings thead th:not(:first-child) { width: 37%; text-align: center; }
.controls-bindings td { padding: 2px 3px; vertical-align: middle; }
.controls-binding { width: 100%; }
.controls-terrain-only { display: block; margin-top: 2px; color: #b4cbbd; font-size: 10px; font-weight: 400; }
.controls-reset { margin-top: 2px; }

@media (max-width: 400px) {
  .controls-panel-body { padding-right: 6px; padding-left: 6px; }
  .controls-bindings-scroll { padding: 3px 0; scrollbar-gutter: auto; }
  .controls-bindings td { padding: 2px; }
  .controls-panel .controls-binding { padding: 7px 4px; font-size: 12px; }
}