/* Királynők: the puzzle's own pastel regions on the black stage, crisp region walls. */
.q-board {
  --n: 8;
  --wall: var(--stage-bg, #000);
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  border-radius: 14px;
  overflow: hidden;
  background: var(--wall);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}
.q-cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-style: solid; border-color: var(--wall); cursor: pointer; color: #111113;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: filter .15s var(--ease-out);
}
@media (hover: hover) { .q-cell:hover { filter: brightness(1.07) saturate(1.05); } }
.q-cell:active { filter: brightness(.94); }
.q-x {
  font-size: clamp(10px, calc(min(600px, 100cqw) / var(--n) * .28), 20px);
  color: rgba(17, 17, 19, .5); font-weight: 600; line-height: 1;
}
.q-queen { width: 58%; height: 58%; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .35)); transition: color .2s; }
.q-pop { animation: q-pop .38s var(--ease-spring); }
@keyframes q-pop { 0% { transform: scale(.35); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }
.q-cell.conflict::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(215, 0, 40, .42) 0 3px, transparent 3px 9px);
  animation: q-fade .25s var(--ease-out);
}
.q-cell.conflict .q-queen { color: #c4001f; }
@keyframes q-fade { from { opacity: 0; } }
.q-cell.hint-target { z-index: 1; box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--game); animation: q-pulse 1.1s ease-in-out infinite; }
.q-cell.hint-focus { outline: 2px dashed rgba(17, 17, 19, .7); outline-offset: -5px; }
@keyframes q-pulse { 50% { box-shadow: inset 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--game) 45%, transparent); } }