/* The right-hand end of the bar, and the one surface it opens.

   The button is the round icon button the battle HUD already uses rather than a second kind of
   round button for the same job. It is the only thing on that end of the bar at any width, so the
   shell reads the same on a phone as it does on a desktop.

   It sits over the bar rather than inside it: the bar is blurred, and a filtered element is the
   containing block for anything fixed within it, which would pin this menu's dismissal layer and
   its settings surface to the height of the bar. The bar is sticky at the top of the screen, so
   these offsets put the button exactly where the bar's own right-hand end is, and the bar keeps
   enough padding on that side that nothing can run underneath it. */
.app-menu {
  position: fixed;
  z-index: 110;
  top: 16px;
  right: 28px;

  @media (max-width: 720px) {
    top: 12px;
    right: 13px;
  }
}

.app-menu-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #5a5739;
  border-radius: 50%;
  color: var(--gold-soft);
  background: rgb(10 12 9 / 84%);
  cursor: pointer;

  @media (max-width: 720px) {
    width: 32px;
    height: 32px;
  }
}

.app-menu-button[aria-expanded="true"] {
  border-color: #b7983d;
  background: linear-gradient(145deg, #3a3117, #1f2216);
}

.app-menu-button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.app-menu-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A press anywhere that is not the panel puts it away. It carries no colour of its own: a menu
   hanging off a bar is a smaller event than a card being read, and dimming the whole page for it
   would say otherwise. */
.app-menu-away {
  position: fixed;
  z-index: 130;
  inset: 0;
}

.app-menu-panel {
  position: absolute;
  z-index: 140;
  top: calc(100% + 10px);
  right: 0;
  width: 210px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid #75683d;
  border-radius: 14px;
  background: #1b1e16;
  box-shadow: 0 18px 44px #000d;
  transform-origin: top right;
  animation: menu-drop 0.16s ease-out both;
}

.app-menu-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  text-decoration: none;
  font: 700 15px "Jost", sans-serif;
  cursor: pointer;
}

.app-menu-item:hover {
  background: #262a1d;
}

.app-menu-item:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

.app-menu-item svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The sound settings, on the centred surface the table already uses for anything it wants read
   rather than glanced at. */
.sound-settings {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(2 3 2 / 78%);
  backdrop-filter: blur(6px);
  animation: fade-in 0.16s ease-out both;
}

.sound-settings-panel {
  width: min(420px, 100%);
  padding: 15px 18px 20px;
  border: 1px solid #8d7f4c;
  border-radius: 17px;
  background: #1b1e16;
  box-shadow: 0 24px 80px #000e;
  animation: sheet-centre-in 0.22s ease-out both;
}

.sound-settings-panel header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sound-settings-panel header strong {
  flex: 1 1 auto;
  font: 700 18px "Jost", sans-serif;
}

.sound-settings-panel > p {
  margin: 7px 0 19px;
  color: var(--muted);
  font-size: 12px;
}

.sound-settings-close {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid #b7983d;
  border-radius: 11px;
  color: var(--ink);
  background: linear-gradient(145deg, #3a3117, #1f2216);
  cursor: pointer;
  font-weight: 700;
}

.sound-channel + .sound-channel {
  margin-top: 15px;
}

.sound-channel label {
  display: block;
  margin-bottom: 1px;
  color: var(--muted);
  font-size: 12px;
}

.sound-channel-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sound-mute {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid #5a5739;
  border-radius: 50%;
  color: var(--gold-soft);
  background: #23261c;
  cursor: pointer;
}

.sound-mute[aria-pressed="true"] {
  color: var(--muted);
}

.sound-mute:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.sound-mute svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The cone is the speaker itself and is always filled; only the arcs and the cut are drawn. */
.sound-mute svg path:first-child {
  fill: currentColor;
  stroke: none;
}

.sound-channel output {
  min-width: 40px;
  color: var(--muted);
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* The track is 44px of hit area with a 6px line drawn through it, because this is dragged with a
   thumb on a phone and a 6px target is not a target. `--fill` is set on the element from the level
   it is showing, so the gold half of the track is the level rather than a decoration beside it. */
.sound-channel input[type="range"] {
  height: 44px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.sound-channel input[type="range"]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

.sound-channel input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold) var(--fill), #34351f var(--fill));
}

.sound-channel input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 1px solid #7d6a2f;
  border-radius: 50%;
  background: var(--gold-soft);
  appearance: none;
}

.sound-channel input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold) var(--fill), #34351f var(--fill));
}

.sound-channel input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 1px solid #7d6a2f;
  border-radius: 50%;
  background: var(--gold-soft);
}