/* Hallmark · macrostructure: Narrative Workflow · tone: playful · anchor hue: existing warm-teal
 * theme: existing Print Play Garden · nav: existing N5 · footer: existing Ft5
 * audience: children with adults · use: solve together and print · enrichment: functional puzzle diagrams
 * pre-emit critique: P4 H4 E4 S5 R5 V4 */
@import url('/tokens.css');
html, body { overflow-x: clip; }
.play-main { color: var(--color-play-ink); }
.play-main .container { max-width: 1000px; }
.play-main h1 { font-size: clamp(32px, 5vw, 52px); max-width: 22ch; }
.play-main :is(h1,h2,h3) { font-family: var(--font-display); font-style: normal; overflow-wrap: anywhere; min-width: 0; line-height: 1.25; }
.play-main h2 { font-size: clamp(24px, 3vw, 32px); }
.play-main h3 { font-size: 22px; }
.play-main p { max-width: 65ch; }
.play-main :is(.button,summary,.breadcrumb a) { white-space: nowrap; }
.play-main .breadcrumb { flex-wrap: wrap; margin-bottom: var(--space-play-lg); }
.play-main .page-lead { font-size: 18px; margin-top: var(--space-play-md); }
.play-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-play-sm); margin-block: var(--space-play-lg); }
.play-main button { cursor: pointer; }
.play-main :is(button,input,select,summary):focus-visible { outline: 3px solid var(--color-play-focus); outline-offset: 3px; }
.play-main :is(input,select) { max-width: 100%; min-width: 0; min-height: 44px; padding: var(--space-play-sm); border: 1px solid var(--color-play-rule); border-radius: 6px; background: var(--color-play-paper); color: var(--color-play-ink); font: inherit; }
.play-main input[type=checkbox] { min-height: 24px; width: 24px; accent-color: var(--color-play-accent); }
.play-main label { display: grid; gap: var(--space-play-sm); }
.play-main .play-check { display: flex; align-items: center; gap: var(--space-play-sm); min-height: 44px; }
.play-main [aria-invalid=true] { border-color: var(--color-play-error); }
.play-main [data-state=error] { color: var(--color-play-error); }
.play-main [data-state=success] { color: var(--color-play-accent); }
.play-main [aria-busy=true] { cursor: progress; }
.play-main :is(button,input,select):disabled { opacity: .55; cursor: not-allowed; }
.play-main .button { transition: none; }
.play-main button:active { transform: translateY(1px); }
@media(prefers-reduced-motion:reduce) { .play-main :is(button,.button):is(:active,:hover) { transform: none; } }
@media (hover:hover) { .play-main :is(input,select):hover { background: var(--color-play-panel); color: var(--color-play-ink); } }
.play-note { color: var(--color-play-muted); font-size: 14px; }
.play-status { min-height: 1.65em; margin-block: var(--space-play-md); font-weight: 700; }
.play-stage { padding-block: var(--space-play-xl); border-top: 1px solid var(--color-play-rule); scroll-margin-top: 112px; }
.play-stage > :is(p,ol,details) { margin-top: var(--space-play-md); }
.play-stage ol { padding-left: var(--space-play-lg); }
.play-stage li + li { margin-top: var(--space-play-sm); }
.play-stage details { max-width: 65ch; }
.play-stage summary { padding-block: 10px; cursor: pointer; font-weight: 700; }
.play-stage details p { padding: var(--space-play-sm) 0; }
.play-progress { padding-block: var(--space-play-md); font-variant-numeric: tabular-nums; }
.play-progress progress { display: block; width: min(100%,400px); margin-top: var(--space-play-sm); accent-color: var(--color-play-accent); }
.play-directory article { padding-block: var(--space-play-xl); border-top: 1px solid var(--color-play-rule); display: grid; gap: var(--space-play-md); }
.play-directory img { width: 160px; height: 160px; object-fit: contain; }
.robot-pair { display: grid; gap: var(--space-play-lg); margin-block: var(--space-play-lg); }
.robot-pair figure { text-align: center; }
.robot-pair figcaption { font-weight: 700; }
.robot-pair svg { width: min(100%,300px); color: var(--color-play-ink); }
.play-word-table { border-collapse: collapse; width: min(100%,360px); table-layout: fixed; margin-block: var(--space-play-lg); font-size: 22px; text-align: center; }
.play-word-table :is(td,th) { height: 44px; border: 1px solid var(--color-play-rule); padding: 0; }
.play-word-table th { font-size: 14px; font-weight: 400; color: var(--color-play-muted); width: 34px; }
.maze-map { display: grid; grid-template-columns: 38px minmax(0,360px) 34px; align-items: start; margin-block: var(--space-play-lg); max-width: 440px; }
.maze-grid { display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); border: 1px solid var(--color-play-ink); }
.maze-grid span { aspect-ratio: 1; border: 1px solid var(--color-play-rule); }
.maze-grid .wall { background: var(--color-play-ink); color: var(--color-play-paper); }
.maze-labels { display: grid; grid-template-rows: repeat(9,1fr); height: 100%; font-size: 12px; text-align: center; }
.maze-labels span { display: grid; place-items: center; }
.maze-labels span:nth-child(2) { grid-row: 4; }.maze-labels span:nth-child(3) { grid-row: 7; }
.maze-grid .route { background: var(--color-play-panel); color: var(--color-play-ink); display: grid; place-items: center; }
.animal-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-play-md); margin-block: var(--space-play-lg); }
.animal-strip figure { text-align: center; }.animal-strip img { width: 100%; height: 100px; object-fit: contain; }
.animal-map { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-play-sm); margin-block: var(--space-play-lg); }
.animal-map label { font-weight: 700; }.animal-map select { width: 100%; font-size: 16px; padding-inline: 2px; }
.role-panel { background: var(--color-play-panel); color: var(--color-play-ink); padding: var(--space-play-lg); border-radius: var(--radius-play); margin-block: var(--space-play-lg); }
.role-panel ol { padding-left: var(--space-play-lg); }.role-panel li { margin-top: var(--space-play-md); }
.family-entries { display: grid; gap: var(--space-play-lg); margin-block: var(--space-play-lg); }
.family-entry { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-play-sm); }
.family-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); width: min(100%,336px); margin-block: var(--space-play-lg); border: 1px solid var(--color-play-ink); }
.family-grid :is(button,span) { display: grid; place-items: center; min-width: 0; min-height: 44px; aspect-ratio: 1; padding: 0; border: 1px solid var(--color-play-rule); border-radius: 0; background: var(--color-play-paper); color: var(--color-play-ink); font-size: 22px; font-weight: 700; }
.family-grid .selected { outline: 3px solid var(--color-play-focus); outline-offset: -3px; }
.family-grid .found { background: var(--color-play-accent); color: var(--color-play-accent-ink); text-decoration: underline; }
.family-clues { padding-left: var(--space-play-lg); }.family-clues li { margin-bottom: var(--space-play-sm); }
.family-play-layout { display: grid; gap: var(--space-play-lg); }
.play-print-root { display: none; }
.play-main [hidden] { display: none !important; }
@media(min-width:40rem) {
  .robot-pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .family-entry { grid-template-columns: minmax(0,1fr) minmax(0,2fr); }
  .family-play-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .play-directory article { grid-template-columns: minmax(0,2fr) minmax(0,1fr); align-items: center; }
}
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body { color: var(--color-play-print-ink); background: var(--color-play-print-paper); }
  body > :not(.play-print-root) { display: none !important; }
  .play-print-root { display: block; }
  .play-print-sheet { break-after: page; font-size: 11pt; line-height: 1.5; }
  .play-print-sheet:last-child { break-after: auto; }
  .play-print-sheet h2 { font-size: 20pt; margin: 0 0 5mm; }
  .play-print-sheet h3 { font-size: 15pt; margin-top: 5mm; }
  .play-print-sheet p { margin-block: 3mm; }
  .play-print-sheet ul,.play-print-sheet ol { padding-left: 6mm; }
  .play-print-sheet li { margin-block: 3mm; }
  .play-print-sheet :is(button,form,details) { display: none; }
  .play-print-sheet .robot-pair { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 4mm 0; }
  .play-print-sheet .robot-pair svg { width: 60mm; }
  .play-print-sheet .play-word-table { width: 100mm; margin: 4mm 0; }
  .play-print-sheet .play-word-table :is(td,th) { height: 10mm; }
  .play-print-sheet .maze-map { width: 150mm; max-width: none; grid-template-columns: 12mm minmax(0,120mm) 10mm; }
  .play-print-sheet .wall { background: var(--color-play-print-ink); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .play-print-sheet .family-grid { width: 105mm; margin: 5mm 0; }
  .play-print-sheet .family-grid span { min-height: 0; font-size: 16pt; }
  .play-print-sheet .family-grid .found { color: var(--color-play-print-ink); background: var(--color-play-print-paper); outline: 1mm solid var(--color-play-print-ink); outline-offset: -1mm; text-decoration: none; }
  .play-print-sheet .animal-strip { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .play-print-sheet .animal-strip img { height: 22mm; }
  .play-print-sheet .animal-map div { height: 25mm; border: 1px solid var(--color-play-print-ink); padding: 2mm; }
  .play-print-source { margin-top: 5mm; font-size: 9pt; }
}