.sokoban-player {
  --soko-paper: var(--bs-body-bg, white);
  --soko-ink: var(--bs-body-color, #222);
  --soko-muted: color-mix(in srgb, var(--soko-ink) 73%, var(--soko-paper));
  --soko-edge: color-mix(in srgb, var(--soko-ink) 24%, var(--soko-paper));
  --soko-danger: #a34438;
  --soko-think: #775724;
  --soko-undo: #31694e;
  margin: 1.6rem 0;
}
.quarto-dark .sokoban-player, [data-bs-theme="dark"] .sokoban-player {
  --soko-danger: #f1aba0;
  --soko-think: #e7cb8d;
  --soko-undo: #9cd3b6;
}
.soko-stage { position: relative; color: var(--soko-ink); }
.sokoban-player > img, .soko-stage img {
  display: block;
  width: min(100%, 32rem);
  height: auto;
  margin: 0 auto;
  image-rendering: pixelated;
}
.soko-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(.8rem, 3vw, 1.8rem);
}
.soko-lane {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: .55rem;
  min-width: 0;
}
.soko-name { align-self: end; font-size: clamp(.88rem, 2.3vw, 1.04rem); }
.soko-pair .soko-lane img { width: 100%; align-self: center; }
.soko-screen {
  display: grid;
  place-items: center;
  width: min(100%, 32rem);
  margin: 0 auto;
  overflow: hidden;
}
.soko-pair .soko-screen { width: 100%; align-self: center; }
.soko-crop { overflow: hidden; }
.soko-screen canvas { display: block; max-width: none; image-rendering: pixelated; }
.soko-bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .6rem;
}
.soko-seek { flex: 1; min-width: 0; height: 1rem; accent-color: var(--soko-muted); cursor: pointer; }
.soko-watch { flex: none; font-size: .82rem; white-space: nowrap; }
.soko-interactive { cursor: pointer; touch-action: manipulation; }
.soko-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--soko-edge);
  border-radius: 50%;
  background: none;
  color: var(--soko-muted);
  cursor: pointer;
}
.soko-toggle::before { content: ""; display: block; box-sizing: border-box; }
.soko-toggle[data-action="pause"]::before { width: .5rem; height: .58rem; border-inline: .16rem solid; }
.soko-toggle[data-action="play"]::before {
  margin-inline-start: .12rem;
  border-block: .32rem solid transparent;
  border-inline-start: .52rem solid;
}
.soko-toggle:hover, .soko-toggle:focus-visible { background: var(--soko-ink); color: var(--soko-paper); }
.soko-toggle:focus-visible { outline: 2px solid var(--soko-ink); outline-offset: 2px; }
.soko-keys {
  position: relative;
  display: flex;
  align-items: center;
  gap: .16rem;
  min-width: 0;
  min-height: 1.6rem;
  overflow: hidden;
}
.soko-key {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 1.45em;
  height: 1.5em;
  box-sizing: border-box;
  border: 1px solid var(--soko-edge);
  border-radius: .16rem;
  font: 600 .88rem/1 ui-monospace, monospace;
}
.soko-key.batch-start { margin-inline-start: .35rem; }
.soko-key.queued { color: var(--soko-muted); border-style: dotted; }
.soko-key.current { color: var(--soko-paper); background: var(--soko-ink); border-color: var(--soko-ink); }
.soko-key.hero-key {
  border: 2px solid color-mix(in srgb, var(--hero) 68%, var(--soko-ink));
  background: color-mix(in srgb, var(--hero) 16%, var(--soko-paper));
  color: var(--soko-ink);
}
.soko-key.hero-key.current {
  background: color-mix(in srgb, var(--hero) 33%, var(--soko-paper));
  box-shadow: inset 0 -2px var(--soko-ink);
}
.soko-key.discarded { color: var(--soko-danger); }
.soko-key.discarded::after {
  content: ""; position: absolute; width: 1.25em; border-top: 1px solid currentColor; transform: rotate(-38deg);
}
.soko-move {
  display: block;
  color: var(--soko-muted);
  font: .8rem/1.4 "Aeonik Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.soko-move:is([data-phase="death"],[data-phase="petrified"],[data-phase="rejected"]) { color: var(--soko-danger); }
.soko-move[data-phase="thinking"] { color: var(--soko-think); }
.soko-move[data-phase="undo"] { color: var(--soko-undo); }
.soko-stage:not(.soko-pair) .soko-keys { margin: .65rem 0 .4rem; }
.sokoban-player figcaption { margin-top: .5rem; }
.sokoban-player[id], .soko-chart[id] { scroll-margin-top: 7rem; }
/* A long status wraps to a second line. Reserve it, so the boards below don't shift as the text changes. */
.soko-move { min-height: 1.4em; }
.soko-pair .soko-move { min-height: 2.8em; }