/* Contextual input lives alongside the world, with no help page. */
.input-cues {
  position: absolute;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  width: 282px;
  z-index: 4;
  color: #f4efe1;
  pointer-events: none;
  font-size: 12px;
  text-shadow: 0 1px 4px #000;
}
.input-cues[hidden] {
  display: none;
}
.input-look[hidden] {
  display: none;
}
.input-cues.is-inspecting .input-move {
  display: none;
}
.controller-diagram {
  display: block;
  width: 100%;
  overflow: visible;
  filter: drop-shadow(0 3px 5px #0008);
}
.pad-shell {
  fill: #182321e8;
  stroke: #bbcab975;
  stroke-width: 1.5;
}
.pad-part > circle,
.pad-part > rect {
  fill: #27322f;
  stroke: #9dada39a;
  stroke-width: 1.3;
  transition:
    fill 100ms,
    stroke 100ms;
}
.pad-part > text {
  fill: #ecede0;
  font:
    12px system-ui,
    sans-serif;
  text-anchor: middle;
  dominant-baseline: middle;
  text-shadow: none;
  pointer-events: none;
}
.pad-part > path {
  stroke: #8d9f95;
  fill: none;
}
.pad-part[data-pad-control='b8'] > text,
.pad-part[data-pad-control='b9'] > text {
  font-size: 9px;
}
[data-layout='ps4'] .pad-part[data-pad-control='b8'] > text,
[data-layout='ps4'] .pad-part[data-pad-control='b9'] > text {
  font-size: 4.8px;
}
.pad-part[data-pad-control='b16'] {
  opacity: 0.32;
}
.pad-part.is-movement > circle {
  stroke: #c6d5c4;
  stroke-width: 2;
}
.pad-part.is-suggested > circle,
.pad-part.is-suggested > rect {
  fill: #645738;
  stroke: #ffdc8d;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 3px #ffcc7466);
}
.pad-part.is-pressed > circle,
.pad-part.is-pressed > rect {
  fill: #efe2a7;
  stroke: #fff8d7;
  stroke-width: 3;
  filter: drop-shadow(0 0 6px #ffdc8d);
}
.pad-part.is-pressed > text {
  fill: #1a2720;
}
.pad-part.is-pressed > path {
  stroke: #263c2d;
}
.pad-caption {
  fill: #f4efe1;
  font:
    13px system-ui,
    sans-serif;
  text-anchor: middle;
}
.pad-center-caption {
  fill: #ece6d5;
  font:
    11px system-ui,
    sans-serif;
  text-anchor: middle;
}
.pad-caption-line {
  fill: none;
  stroke: #c6d5c46b;
  stroke-width: 1;
}
.input-feedback {
  display: block;
  min-height: 17px;
  text-align: center;
  color: #ffe2a3;
  margin-top: 5px;
}
.input-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  align-items: flex-end;
}
.input-action {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  min-height: 34px;
  padding: 5px 12px 5px 7px;
  border-radius: 18px;
  background: #15231dd9;
  border: 1px solid #d2c0974a;
  color: #f5ecd5;
  font: inherit;
  text-align: left;
  pointer-events: auto;
}
.input-action span {
  overflow-wrap: anywhere;
}
.input-cues kbd {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid #f3d59a90;
  background: #645738;
  color: #fff3cf;
  font:
    12px system-ui,
    sans-serif;
  text-shadow: none;
}
.input-action.is-pressed kbd,
.input-cues kbd.is-pressed {
  background: #fff0b7;
  color: #1e2b23;
  box-shadow: 0 0 8px #ffdd8e90;
}
.input-action:hover,
.input-action:focus-visible {
  border-color: #ffe1a0;
  outline: 2px solid #ffe1a0;
  outline-offset: 2px;
}
.input-basics {
  padding: 10px 12px;
  border-radius: 10px;
  background: #15231dd9;
  border: 1px solid #d2c09735;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.input-move,
.input-look {
  display: flex;
  align-items: center;
  gap: 7px;
}
.input-keys {
  display: inline-flex;
  gap: 3px;
}
.input-look svg {
  width: 18px;
  height: 24px;
  fill: #2c3c32;
  stroke: #dacda6;
  stroke-width: 1.5;
}
.input-look > span {
  margin-left: auto;
}
/* The cue replaces the old duplicated action text, while their game handlers stay shared. */
.game-viewport:has(.input-cues) #interaction-hint,
.game-viewport:has(.input-cues) #companion524-controls,
.game-viewport:has(.input-cues) .riding-controls,
.game-viewport:has(.input-cues) #boat-board,
.game-viewport:has(.input-cues) #boat-hint,
.game-viewport:has(.input-cues) .prompt-bar {
  display: none;
}
.chat-panel {
  max-width: calc(100vw - 360px);
}
@media (max-width: 700px) {
  .input-cues {
    width: 220px;
    right: 12px;
    bottom: 16px;
    font-size: 11px;
  }
  .input-cues kbd {
    min-width: 20px;
    height: 21px;
    font-size: 11px;
    padding: 0 4px;
  }
  .controller-diagram {
    width: 195px;
    margin-left: auto;
  }
  .input-basics {
    padding: 8px;
  }
  .input-move {
    gap: 5px;
  }
  .chat-panel {
    max-width: calc(100vw - 260px);
  }
  .game-viewport:has(#chat-content:not([hidden])) .input-cues {
    visibility: hidden;
  }
}
@media (max-height: 540px) {
  .input-cues {
    width: 235px;
    right: 12px;
    bottom: 12px;
  }
  .controller-diagram {
    width: 182px;
    margin-left: auto;
  }
  .input-feedback {
    min-height: 14px;
    margin-top: 3px;
    font-size: 11px;
  }
  .input-actions {
    gap: 3px;
    margin-top: 4px;
  }
  .input-action {
    min-height: 28px;
    padding-block: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pad-part > circle,
  .pad-part > rect {
    transition: none;
  }
}
.assist-target {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 3px 8px;
  border: 2px solid #f4df9b;
  border-radius: 10px;
  background: #182221e6;
  color: #fff5d5;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}
.assist-target[hidden] {
  display: none;
}
.assist-target::after {
  content: '';
  position: absolute;
  left: calc(50% - 4px);
  bottom: -6px;
  width: 6px;
  height: 6px;
  border-right: 2px solid #f4df9b;
  border-bottom: 2px solid #f4df9b;
  background: #182221;
  transform: rotate(45deg);
}
.assist-target-attack {
  border-color: #ffa18f;
}
.assist-target-attack::after {
  border-color: #ffa18f;
}