.adventureControllerPanel[hidden] { display: none; }
.adventureControllerPanel {
  position: absolute;
  inset: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  z-index: 65;
  width: min(760px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  color: #203d3a;
  color-scheme: light;
  background: #f4f8f5;
  border: 1px solid #9db9b3;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgb(0 0 0 / 28%);
}
dialog.adventureControllerPanel { position: fixed; height: calc(100dvh - 24px); }
.adventureControllerPanel::backdrop { background: rgb(7 20 17 / 60%); }
.adventureControllerPanel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #bed2cb; }
.adventureControllerPanel h2 { font-size: 20px; margin: 0; }
.adventureControllerPanel button { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding: 8px; }
.adventureControllerPanel button, .adventureControllerPanel select {
  color: #203d3a;
  background: #ffffff;
  border: 1px solid #91ada5;
  border-radius: 6px;
  font-family: inherit;
}
.adventureControllerPanel button[aria-pressed="true"] { background: #235f54; color: #fff; }
.adventureControllerPanel button:focus-visible, .adventureControllerPanel select:focus-visible, .adventureControllerPanel input:focus-visible {
  outline: 3px solid #297f72;
  outline-offset: 2px;
}
.adventureControllerPanel svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
.adventureControllerBody { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px 16px; }
.adventureControllerBody p, .adventureControllerBody pre { overflow-wrap: anywhere; white-space: pre-wrap; }
.adventureControllerBindings { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 20px; margin-block: 14px; }
.adventureControllerBindings label { display: grid; grid-template-columns: minmax(0,1fr) 100px; align-items: center; gap: 8px; font-size: 14px; }
.adventureControllerBindings label > span { overflow-wrap: anywhere; }
.adventureControllerBindings label.isButtonBinding { grid-template-columns: minmax(0,1fr) 100px 44px; }
.adventureControllerBindings select { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
.adventureControllerBindings label.isCycleSelector { grid-template-columns: minmax(0,1fr) minmax(156px,1.4fr); }
.adventureControllerPanel footer { display: flex; gap: 12px; margin-top: 12px; }
.adventureControllerPanel details { margin-top: 16px; }
.adventureControllerPanel form > label { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.adventureControllerPanel input[type="checkbox"] { width: 20px; height: 20px; accent-color: #235f54; }
@media (max-width: 640px) {
  .adventureControllerBindings { grid-template-columns: minmax(0,1fr); }
}
.adventureControllerPanel { color:#f3f6e9; background:#1d3e38; color-scheme:dark; }
.adventureControllerPanel header { background:#17362f; border-color:#608c7e; }
.adventureControllerPanel .controllerFields { border:0; padding:0; margin:0; min-width:0; }
.adventureControllerPanel .controllerFields:disabled { opacity:.45; }
.adventureControllerPanel :is(button,select,input:not([type=checkbox])) { color:#f5f7eb; background:#294f44; border:1px solid #82aa98; font:inherit; font-size:16px; }
.adventureControllerPanel :is(select,input:not([type=checkbox])) { min-width:0; }
.adventureControllerPanel button { min-width:44px; flex-shrink:0; }
.adventureControllerPanel button[aria-pressed=true] { background:#e5c574; color:#243c30; }
.adventureControllerPanel .controllerProfileFields { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end; }
.adventureControllerPanel .controllerProfileFields>label { display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0;min-width:0; }
.adventureControllerPanel .controllerProfileTools { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px; }
.adventureControllerPanel .controllerProfileTools label { display:flex;flex-direction:row;align-items:center;gap:8px;margin:0; }
.adventureControllerPanel .controllerProfileTools input[type=checkbox] { flex:none;margin:0; }
.adventureControllerPanel .controllerProfileTools button { width:44px;height:44px; }
.adventureControllerPanel .controllerProfileFields input:not([type=checkbox]),.adventureControllerPanel .controllerProfileFields select { width:100%;min-height:44px;padding:8px;border-radius:4px; }
.adventureControllerPanel .adventureControllerBindings label { margin:0; }
.adventureControllerPanel .adventureControllerBindings input:not([type=checkbox]) { width:100%;min-height:44px;padding:6px;border-radius:4px; }
.adventureControllerPanel .adventureControllerBody>label { display:flex;flex-direction:row;align-items:center;gap:12px;margin:0 0 16px; }
.adventureControllerPanel #controllerDevice { min-width:0;min-height:44px;flex:1;max-width:100%; }
.adventureControllerPanel summary { min-height:44px;display:flex;align-items:center;font-weight:750;cursor:pointer;border-block:1px solid #608c7e; }
.adventureControllerPanel #controllerStatus { min-height:22px;color:#f2d78e; }
.adventureControllerPanel footer { position:static;flex-shrink:0;margin:0;padding:10px 16px;background:#1d3e38;border-top:1px solid #608c7e;flex-wrap:wrap; }
.adventureControllerPanel button:focus-visible,.adventureControllerPanel input:focus-visible,.adventureControllerPanel select:focus-visible,.adventureControllerPanel summary:focus-visible { outline-color:#f4ce75; }
.controllerConflict { display:flex;align-items:center;flex-wrap:wrap;gap:8px; }
.controllerConflict>span { flex-basis:100%;color:#f2d78e; }
.controllerTest { margin-top:12px; }
.controllerTestStage { position:relative;width:100%;height:132px;background:#142d29;border:1px solid #80a894;border-radius:4px;margin:8px 0;overflow:hidden; }
.controllerTestDot { position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:50%;background:#f0cc69;border:2px solid #fff2bc;transform:translate(-50%,-50%); }
.controllerTestActions { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px; }
.controllerTestActions>span { border-bottom:2px solid transparent;padding:4px;font-size:13px; }
.controllerTestActions>span[data-pressed=true] { color:#f4d477;border-color:#f4d477; }
@media(max-width:480px){.adventureControllerPanel .controllerProfileFields{grid-template-columns:minmax(0,1fr)}.adventureControllerBindings label.isButtonBinding{grid-template-columns:minmax(0,1fr) 90px 44px}}