/* The play board (play/stops.js), with board.css. Works on any page: the
   colours fall back to Puzzle Arsenal's own when the page doesn't set them. */
.pa-play { position: relative; outline: none; font-family: var(--body-f, Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif); color: var(--ink, #0E1218); }
.pa-play-board { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.pa-play-board .hit { fill: transparent; cursor: pointer; }
.pa-play-board .hit:hover { fill: rgba(30, 41, 59, 0.06); }
.pa-play.solved .pa-play-board .hit, .pa-play-board.revealed .hit { cursor: default; }
.pa-play.drawing .pa-play-board .lit { animation: pa-play-glow 1.3s ease-in-out infinite; }
@keyframes pa-play-glow { 50% { fill: rgba(72, 217, 237, 0.42); } }
.pa-play-status { min-height: 1.4em; margin: 10px 2px 0; font-size: 13.5px; color: var(--body, #4E5763); text-align: center; }
.pa-play-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 10px; }
.pa-play-modes, .pa-play-acts, .pa-play-view { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pa-play-view .pa-play-btn.on { border-color: var(--ink, #0E1218); }
.pa-play-modes { padding: 3px; border: 1px solid var(--line-2, #D6DCE4); border-radius: 10px; background: var(--mist-2, #EDF0F4); }
.pa-play-btn { min-height: 38px; padding: 7px 13px; border: 1px solid var(--line-2, #D6DCE4); border-radius: 8px; background: var(--white, #FFFFFF); color: var(--ink, #0E1218); font: 600 13.5px var(--body-f, Inter, sans-serif); cursor: pointer; }
.pa-play-btn:hover:not(:disabled) { border-color: var(--steel, #2F3F57); }
.pa-play-btn:disabled { opacity: .42; cursor: default; }
.pa-play-modes .pa-play-btn { border-color: transparent; background: transparent; }
.pa-play-modes .pa-play-btn.on { border-color: var(--ink, #0E1218); background: var(--white, #FFFFFF); box-shadow: 0 1px 2px rgba(14, 18, 24, .12); }
.pa-play-win { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--ok-bg, #E7F4EE); color: var(--ok, #22684A); font-size: 14px; animation: pa-play-in .35s ease-out; }
.pa-play-win[hidden] { display: none; }
.pa-play-win strong { font: 700 17px var(--display, Poppins, sans-serif); }
.pa-play-win span { color: var(--ink, #0E1218); }
.pa-play.solved .pa-play-board svg { animation: pa-play-pop .6s ease-out; }
@keyframes pa-play-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes pa-play-pop { 40% { transform: scale(1.025); } }
.pa-play-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pa-play-confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: pa-play-fall 1.6s ease-in forwards; }
@keyframes pa-play-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--drift, 0), 420px) rotate(540deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pa-play.drawing .pa-play-board .lit, .pa-play.solved .pa-play-board svg, .pa-play-win { animation: none; }
}
@media (max-width: 600px) {
  .pa-play-btn { padding: 7px 10px; font-size: 13px; }
}
/* .pa-play--fill (set by the page on the board's element): the board takes
   the height its container has left after the banner, status and tools, so
   a full-page Play fits the screen; below a minimum it stops shrinking and
   the page scrolls instead. */
.pa-play.pa-play--fill { display: flex; flex-direction: column; min-height: 0; }
.pa-play--fill .pa-play-board { flex: 1 1 0; min-height: 260px; display: flex; justify-content: center; }
.pa-play--fill .pa-play-win, .pa-play--fill .pa-play-status, .pa-play--fill .pa-play-tools { flex: none; }
.pa-play--fill .pa-play-board svg { width: 100%; height: 100%; max-width: 100%; }