/* vcrush · play guide — paired with js/play-guide.js. The entries reuse the
   Guidebook's own .rules / .entry / .chip styles; this only frames them. */

/* The guide replaces the three optional panels that used to sit under the tray
   (board buttons, turn review, move preview). Their modules still load and pass
   their tests; delete this rule to bring them back. */
.screen.play > .depth-board-controls,
.screen.play > .depth-replay,
.screen.play > .move-lens { display: none !important; }

.play-guide {
  display: grid;
  gap: 12px;
  margin-top: 6px;
  padding: 16px 14px 18px;
  border: 2px solid color-mix(in oklab, var(--brass) 55%, #fff);
  border-radius: 18px;
  background: var(--paper);
}
.play-guide h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
}
.play-guide .pg-lead { margin: -6px 0 0; font-size: .9rem; color: var(--ink-soft); }

.pg-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-tab {
  appearance: none;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 6px 12px;
  border: 2px solid color-mix(in oklab, var(--brass) 45%, #fff);
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--ink);
  font: 600 .84rem/1.15 var(--body);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pg-tab[aria-selected="true"] {
  background: var(--brass);
  border-color: var(--brass);
  color: #fff;
}
.pg-tab:focus-visible { outline: 3px solid var(--brass-lit); outline-offset: 2px; }
.pg-count {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}
.pg-count[hidden] { display: none; }

.pg-panel[hidden] { display: none; }
.pg-panel .lead { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* A piece that is on the live board right now. */
.play-guide li.pg-here {
  border-radius: 12px;
  background: color-mix(in oklab, var(--brass) 9%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brass) 55%, transparent);
  padding-top: 6px;
  padding-bottom: 6px;
  padding-right: 8px;
}
.play-guide li.pg-here > b::after {
  content: "On your board";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--brass);
  color: #fff;
  font: 700 .62rem/1.3 var(--body);
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: middle;
}
.play-guide li.pg-here > .chip { top: 6px; }

/* The board rule [data-icing]{position:relative} (style.css) also caught the icing
   chip and dropped it into the text; pin it like every other chip (Guidebook too). */
.rules .chip[data-icing] { position: absolute; }