/* Create By Asking: the maze generator. Loaded after puzzles.css, which gives the board-and-side-panel layout. */

.mz-board { position: relative; display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: #FFFDF6; touch-action: pinch-zoom; overflow-anchor: none; cursor: pointer; outline: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: background 0.3s; }
/* overflow-anchor: none stops the browser scrolling the page to follow a wall or the mouse when the zoomed view moves */
.mz-board:focus-visible { box-shadow: 0 0 0 3px #FFC93C; }
.mz-board svg { display: block; width: 100%; height: auto; max-height: min(74vh, 720px); }
.mz-board.dark { background: #0E0722; }
.mz-board [data-solpath] { transition: stroke-dashoffset 1.4s ease-in-out, opacity 0.2s; }
.mz-board .mz-goal { transform-box: fill-box; transform-origin: center; }
.mz-board.won .mz-goal { animation: mz-pop 0.5s ease-in-out 3; }
@keyframes mz-pop { 50% { transform: scale(1.7); } }
.mz-building .mz-board { cursor: progress; }
.mz-zoomed .mz-board { cursor: grab; }
.mz-panning .mz-board { cursor: grabbing; }
.mz-chars .chip-dark { font-size: 1rem; padding: 6px 11px; }
.mz-more { border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 10px 0; }
.mz-more summary { cursor: pointer; font: 600 var(--step--1)/1.3 var(--body); color: #CBBFE8; }
.mz-more summary:hover { color: #fff; }
.mz-opts { display: grid; gap: 14px; margin-top: 12px; }
.mz-opts .btn { justify-self: start; }

@media print {
  .mz-print .f-sheet h1 { margin-bottom: 3mm; }
  .mz-print .mz-line { display: flex; justify-content: space-between; gap: 8mm; margin: 0 0 6mm; font-size: 11pt; text-align: left; }
  .mz-sheet svg { display: block; width: 100%; height: auto; max-height: 215mm; margin: 0 auto; }
  .mz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
  .mz-grid figure { margin: 0; break-inside: avoid; }
  .mz-grid svg { display: block; width: 100%; height: auto; max-height: 112mm; margin: 0 auto; }
  .mz-grid figcaption { font-size: 9pt; margin-top: 1mm; }
  .mz-answers.one .mz-grid { grid-template-columns: 1fr; }
  .mz-answers.one .mz-grid svg { max-height: 225mm; }
}