/* The Music and sounds panel — js/games/audio/panel.js.

   One panel for every game, so one stylesheet, linked from every game page.
   Theme tokens only, never a colour, so it follows whichever of the site's
   themes is picked — the same as the arcade dialogs it sits beside.

   Sized the way looseEnds.css and arcade.css are, for who plays these:
   nothing smaller than 1rem that has to be read, nothing shorter than 2.6rem
   that has to be pressed. */

.snd-dialog {
  width: min(36rem, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--raised, var(--surface));
  color: var(--ink);
  overflow: hidden;
}

.snd-dialog[open] {
  display: flex;
  flex-direction: column;
}

.snd-dialog::backdrop { background: var(--backdrop, rgba(0, 0, 0, 0.45)); }

.snd-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule);
}

.snd-dialog__head h2 {
  margin: 0;
  font-size: 1.25rem;
}

.snd-dialog__close {
  min-width: 2.4rem;
  min-height: 2.4rem;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.2rem;
  cursor: pointer;
}

/* Only the body scrolls, so the close button never scrolls away. */
.snd-dialog__body {
  overflow-y: auto;
  padding: 0 18px 18px;
}


/* ---------------------------------------------------------------- blocks */

.snd-block {
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--rule);
}

.snd-block:last-child { border-bottom: 0; }

.snd-block h3 {
  margin: 16px 0 8px;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.snd-note {
  margin: 8px 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* Empty says nothing and takes no room, so a status line costs nothing until
   there is something to say. */
.snd-status {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
}

.snd-status:empty { display: none; }


/* --------------------------------------------------------------- controls */

.snd-dialog button {
  font-family: inherit;
  font-size: 1rem;
  min-height: 2.6rem;
  padding: 0 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.snd-dialog button:hover:not(:disabled) { background: var(--accent-soft); }
.snd-dialog button:disabled { opacity: 0.5; cursor: default; }

.snd-dialog button.snd-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.snd-dialog button.snd-primary:hover { background: var(--accent-strong, var(--accent)); }

.snd-switch {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
}

.snd-switch input {
  width: 1.4rem;
  height: 1.4rem;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--accent);
}

.snd-switch__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.snd-switch__hint {
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.snd-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 0;
}

.snd-field > span {
  min-width: 8.5rem;
  font-weight: bold;
}

.snd-field select {
  font-family: inherit;
  font-size: 1rem;
  min-height: 2.6rem;
  padding: 0 0.6rem;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

.snd-field input[type="range"] {
  flex: 1 1 10rem;
  min-height: 2.6rem;
  accent-color: var(--accent);
}


/* ------------------------------------------------------------ now playing */

.snd-now-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 6px 0 0;
}

.snd-now {
  margin: 0;
  font-size: 1rem;
}

.snd-now__by { color: var(--ink-muted); }


/* --------------------------------------------------------- their own music */

.snd-list {
  list-style: none;
  margin: 8px 0 12px;
  padding: 0;
}

.snd-list__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 12px;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
}

/* Long file names are common and have no spaces to break at. */
.snd-list__name {
  overflow-wrap: anywhere;
}

.snd-list__meta {
  grid-column: 1;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.snd-list__item button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.snd-list__empty {
  padding: 8px 0;
  color: var(--ink-muted);
}

.snd-link {
  margin: 14px 0 0;
}

.snd-link label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}

.snd-link__row {
  display: flex;
  gap: 8px;
}

.snd-link input {
  flex: 1;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0 0.6rem;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}


/* ------------------------------------------------- the tip in the rules

   Not part of the panel: it is the line near the top of each game's How to
   play that says the panel exists. Here rather than in eight game
   stylesheets because it is the same line in all of them. */

.snd-tip {
  margin: 12px 0;
  padding: 10px 14px;
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--ink);
  line-height: 1.5;
}


/* ------------------------------------------------------------- the swaps */

.snd-swap {
  margin-top: 8px;
}

.snd-swap summary {
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
}

/* display:flex drops the summary's own triangle; this puts one back. */
.snd-swap summary::before {
  content: "\25B8";
  margin-right: 0.5rem;
}

.snd-swap[open] summary::before { content: "\25BE"; }
.snd-swap summary::-webkit-details-marker { display: none; }

.snd-slot {
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}

.snd-slot__says { font-weight: bold; }

.snd-slot__now {
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.snd-slot__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}