/*
 * The board's own chrome, the same near-black panel the desktop rebuild uses, so the two look
 * like one game. It is deliberately the Sokoban board's stylesheet with a solution list added:
 * the two games sit on the same site and were rebuilt the same week.
 *
 * Shared by index.html and embed.html. The frame on /software/eight-puzzle is the second of
 * those, so this file has to stand on its own — the site's stylesheet does not reach inside
 * an iframe.
 */

:root {
  --chrome: #1b1e26;
  --backdrop: #14161c;
  --frame: #2a2e3a;
  --text: #c8ceda;
  --muted: #8a92a6;
  --accent: #d9b44a;
  --pick: #2f62b8;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--backdrop);
  color: var(--text);
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ toolbar */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 12px;
  background: var(--chrome);
  border-bottom: 1px solid var(--frame);
}

.toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
}

/*
 * Everything in the toolbar is sized to fit one row inside the 766-pixel frame on
 * /software/eight-puzzle: two pickers and five buttons wrapped there, and a wrapped toolbar
 * takes its second row out of the board.
 */
.toolbar select {
  min-width: 0;
  max-width: 9rem;
  padding: 4px 7px;
  border: 1px solid var(--frame);
  border-radius: 6px;
  background: #0f1116;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.toolbar .spacer { flex: 1 1 auto; }

button {
  padding: 5px 10px;
  border: 1px solid var(--frame);
  border-radius: 6px;
  background: #232733;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

button:hover:not(:disabled) { border-color: var(--accent); color: #fff; }
button:disabled { opacity: 0.4; cursor: default; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ------------------------------------------------------- board and solution */

/*
 * The board takes the room that is left and the solution list sits beside it, until the frame
 * is too narrow for both — below 560px the list drops under the board and keeps a fixed height,
 * which is what a phone gets.
 */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  background: var(--backdrop);
}

#board {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  touch-action: none;
  cursor: pointer;
}

.solution {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px 12px;
  gap: 6px;
  background: var(--chrome);
  border-left: 1px solid var(--frame);
}

.solution h2 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#steps {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--frame);
  border-radius: 6px;
  background: #10131a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  white-space: pre;
}

#steps:empty::after {
  content: "Press Solve for the shortest way home.";
  display: block;
  padding: 6px;
  color: var(--muted);
  font-family: inherit;
  white-space: normal;
}

#steps li {
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
}

#steps li:hover { background: #1b2130; }
#steps li.on { background: var(--pick); color: #fff; }

#search {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
}

#loading, #banner {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 14px;
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

#loading { background: var(--backdrop); }
#banner { background: rgb(20 22 28 / 0.88); color: var(--text); }
#banner[hidden] { display: none; }
#banner p { margin: 0; font-size: 15px; }
#banner div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/*
 * Narrow: the list goes under the board, and the board becomes a square as wide as the frame
 * rather than whatever height is left over — on a phone the toolbar wraps to three rows and the
 * d-pad appears, and a board sized by the remainder came out about a hundred pixels across.
 * The page scrolls instead, which is what the host page's taller frame leaves room for.
 */
@media (max-width: 560px) {
  html, body { height: auto; min-height: 100%; }

  .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    flex: 0 0 auto;
  }

  #board {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .solution {
    border-left: 0;
    border-top: 1px solid var(--frame);
    height: 8rem;
  }

  #loading, #banner { position: fixed; }
}



/* --------------------------------------------------------------- status line */

.status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 7px 12px 9px;
  background: var(--chrome);
  border-top: 1px solid var(--frame);
  font-size: 11.5px;
}

#status { color: var(--text); }
#counters { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- d-pad */

/*
 * Only for touch. A pointer gets the keyboard and the tiles themselves, and the pad would be
 * four buttons of clutter; a phone gets it because a tile is a small target on a small screen.
 */
.pad { display: none; }

@media (hover: none) and (pointer: coarse) {
  .pad {
    display: grid;
    grid-template-columns: repeat(3, 3rem);
    grid-template-rows: repeat(2, 3rem);
    gap: 6px;
    justify-content: center;
    padding: 10px 12px 14px;
    background: var(--chrome);
    border-top: 1px solid var(--frame);
  }

  .pad button {
    grid-area: var(--area);
    padding: 0;
    font-size: 17px;
    text-transform: none;
  }
}

/* ------------------------------------------------------------ the page frame */

/* index.html only: embed.html is the bare board, with the host page doing the talking. */
.page-head, .page-foot {
  padding: 14px 16px;
  background: var(--chrome);
  font-size: 12.5px;
  color: var(--muted);
}

.page-head { border-bottom: 1px solid var(--frame); }
.page-foot { border-top: 1px solid var(--frame); }

.page-head h1 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

.page-head p, .page-foot p { margin: 0; }
a { color: var(--accent); }

kbd {
  padding: 1px 5px;
  border: 1px solid var(--frame);
  border-radius: 4px;
  background: #0f1116;
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text);
}