/* Game type `queens`: board, hint player, painter. The board keeps its own ink in dark mode,
   like the game's own pastel board. */

.qb-frame { width: 100%; max-width: 31rem; }
/* keep the hint text and buttons above the fold on laptop screens */
@media (min-width: 920px) { .qb-frame { max-width: min(31rem, 100vh - 330px); min-width: 20rem; } }
.qb {
  --n: 8;
  --wall: 3px;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1;
  border: calc(var(--wall) + 1px) solid var(--board-ink);
  border-radius: 14px;
  overflow: hidden;
  background: var(--board-ink);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--board-ink) 85%, transparent);
  user-select: none;
  -webkit-user-select: none;
}
.qb-row { display: contents; }
.qb-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  background: var(--c, #fff);
  border-right: 1px solid rgba(43, 33, 69, .2);
  border-bottom: 1px solid rgba(43, 33, 69, .2);
  transition: filter .2s ease;
}
.qb-cell.wr { border-right: var(--wall) solid var(--board-ink); }
.qb-cell.wb { border-bottom: var(--wall) solid var(--board-ink); }
.qb-cell.lc { border-right: 0; }
.qb-cell.lr { border-bottom: 0; }

.qb-cat { width: 76%; height: 76%; color: var(--board-ink); }
.qb-x { width: 36%; height: 36%; fill: none; stroke: var(--board-ink); stroke-width: 1.7; stroke-linecap: round; opacity: .5; }

/* the step being explained */
.qb.has-focus .qb-cell:not(.is-focus) { filter: saturate(.55) brightness(1.04); }
/* ring only: a tint would shift the region colour the hint text names */
.qb-cell.is-focus::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 3px #e0a100, inset 0 0 0 5px rgba(255, 255, 255, .55);
  pointer-events: none;
}
.qb-cell.is-new .qb-x { opacity: 1; stroke: #c2255c; stroke-width: 2.1; animation: qb-pop .32s cubic-bezier(.2, 1.5, .4, 1) both; }
.qb-cell.is-new .qb-cat { animation: qb-pop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes qb-pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); } }

/* hero example: the crosses arrive once, in reading order */
.qb-demo .qb-cell.is-new .qb-x { animation-duration: .45s; }
.qb-demo .qb-cell.is-new:nth-child(4n+1) .qb-x { animation-delay: .25s; }
.qb-demo .qb-cell.is-new:nth-child(4n+2) .qb-x { animation-delay: .4s; }
.qb-demo .qb-cell.is-new:nth-child(4n+3) .qb-x { animation-delay: .55s; }
.qb-demo .qb-cell.is-new:nth-child(4n) .qb-x { animation-delay: .7s; }

/* hint player */
.qr-caption { margin-top: 18px; min-height: 6.2em; }
.qr-count { margin: 0 0 4px; font: 700 .92rem/1.3 var(--font-display); color: var(--muted); }
.qr-text { margin: 0; font-size: 1.07rem; line-height: 1.5; max-width: 34rem; }
.qr-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 12px; max-width: 31rem; }
.qr-full { margin: 12px 0 0; }
.result-actions { margin-top: 18px; }
.compare { margin-top: 14px; }
.compare summary { cursor: pointer; font: 600 .95rem/1.4 var(--font-display); color: var(--muted); }
.compare img { display: block; margin-top: 10px; max-height: 70vh; width: auto; max-width: 100%; border-radius: 14px; border: 2px solid var(--line); }

/* painter */
.qp-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.qp-label { font: 700 .95rem/1 var(--font-display); margin-right: auto; }
.qp-size { min-width: 4.5ch; text-align: center; font: 800 1.1rem/1 var(--font-display); }
.qp-step { width: 44px; padding: 0; font-size: 1.3rem; }
.qp-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.qp-swatch {
  -webkit-appearance: none; appearance: none;
  display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  border-radius: 13px;
  border: 2px solid var(--board-ink);
  background: var(--c, var(--surface));
  color: var(--board-ink);
  font: 800 .85rem/1 var(--font-display);
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.qp-swatch span { opacity: .6; }
.qp-swatch[aria-checked="true"] { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.qp-swatch[aria-checked="true"] span { opacity: 1; }
.qp-tool { background: var(--surface); color: var(--ink); }
.qp-tool-icon { width: 28px; height: 28px; color: var(--ink); }
.qp-erase { font-size: 1.2rem; }

.qb-paint { touch-action: none; cursor: crosshair; }
.qb-paint .qb-cell { cursor: pointer; }
.qb-paint .qb-cell.is-empty {
  background: repeating-linear-gradient(135deg, #ffffff 0 5px, #efebf7 5px 10px);
}
.qb-paint .qb-cell:focus-visible { outline: 3px solid #e0a100; outline-offset: -4px; border-radius: 4px; z-index: 1; }
.qp-status { margin: 14px 0 12px; font-weight: 600; }
.qp-help { font-size: .88rem; color: var(--muted); margin-top: 12px; max-width: 34rem; }

@media (max-width: 380px) {
  .qb { --wall: 2px; }
  .qp-swatch { width: 38px; height: 38px; }
}