/* Interactive Play surface. It deliberately reuses the site tokens from site.css. */
.word-search-page {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.word-search-instructions,
.word-search-board,
.word-search-words,
.word-search-actions {
  max-width: 850px;
}

.word-search-page,
.word-search-print,
.word-search-answer {
  --word-search-grid-max: 760px;
}

.word-search-instructions {
  margin: 2rem 0;
  padding: 1.25rem 1.4rem;
  background: var(--wash);
  border-inline-start: .35rem solid var(--gold-deep);
}

.word-search-instructions h2,
.word-search-board h2,
.word-search-words h2 {
  font-size: 1.45rem;
}

.word-search-instructions li + li {
  margin-top: .45rem;
}

.word-search-grid-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: .35rem;
  border: 1px solid var(--line);
  background: var(--card);
}

.word-search-grid {
  --word-search-letter-size: clamp(1.15rem, 2.2vw, 1.5rem);
  position: relative;
  isolation: isolate;
  min-width: 550px;
  display: grid;
  gap: 0;
  width: min(100%, var(--word-search-grid-max));
  margin: 0 auto;
  background: var(--paper);
}

.word-search-grid::before,
.word-search-answer-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(8.333333% - 1px),
      var(--line) calc(8.333333% - 1px),
      var(--line) 8.333333%
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(8.333333% - 1px),
      var(--line) calc(8.333333% - 1px),
      var(--line) 8.333333%
    );
}

.word-search-grid [role="row"] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
}

.word-search-grid button {
  width: 100%;
  aspect-ratio: 1;
  min-width: 44px;
  min-height: 44px;
  position: relative;
  z-index: 2;
  padding: .25rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 800 var(--word-search-letter-size)/1 Georgia, "Times New Roman", serif;
  cursor: pointer;
  touch-action: manipulation;
}

.word-search-grid button:hover {
  border-color: var(--gold-deep);
  background: var(--wash);
}

.word-search-grid button:focus-visible {
  position: relative;
  z-index: 3;
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
}

.word-search-grid button[data-state="pending"] {
  border-color: var(--gold-deep);
  outline: 3px dashed var(--gold-deep);
  outline-offset: -5px;
  background: var(--wash);
  font-weight: 900;
}

.word-search-grid button[data-state="found"] {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  font-weight: 900;
}

.word-search-found-paths {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* The print and answer variants share a readable 12-column layout that fits
   the page at screen width and remains a labelled keyboard-scroll surface at
   high zoom. Print media removes the surrounding frame for paper. */
.word-search-print-grid,
.word-search-answer-grid {
  --word-search-letter-size: clamp(1.05rem, 2vw, 1.35rem);
  width: min(100%, var(--word-search-grid-max));
  margin-inline: auto;
  max-width: 100%;
  overflow-x: auto;
  padding: .35rem;
  border: 1px solid var(--line);
  background: var(--card);
}

.word-search-print-row,
.word-search-answer-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
}

.word-search-print-row span,
.word-search-answer-row span {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: 800 var(--word-search-letter-size)/1 Georgia, "Times New Roman", serif;
}

/* Letter-size preferences change the type only. The 12 x 12 geometry stays
   fixed so a family's chosen size carries cleanly from puzzle to print and
   answer key. S starts at the former M size, M starts at the former L size,
   and L gives families a genuinely large reading option. */
body[data-word-search-font-size="small"] .word-search-grid,
body[data-word-search-font-size="small"] .word-search-print-grid,
body[data-word-search-font-size="small"] .word-search-answer-grid {
  --word-search-letter-size: clamp(1.15rem, 2.2vw, 1.5rem);
}

body[data-word-search-font-size="medium"] .word-search-grid,
body[data-word-search-font-size="medium"] .word-search-print-grid,
body[data-word-search-font-size="medium"] .word-search-answer-grid {
  --word-search-letter-size: clamp(1.35rem, 2.8vw, 1.8rem);
}

body[data-word-search-font-size="large"] .word-search-grid,
body[data-word-search-font-size="large"] .word-search-print-grid,
body[data-word-search-font-size="large"] .word-search-answer-grid {
  --word-search-letter-size: clamp(1.55rem, 3.3vw, 2.15rem);
}

.word-search-print-words {
  max-width: 760px;
  margin: 0 auto 1.35rem;
}

.word-search-print-words ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .35rem 1.4rem;
  margin: .7rem 0 0;
  padding-left: 1.25rem;
}

.word-search-answer-grid .answer-cell {
  font-weight: 900;
}

.word-search-answer-plate {
  max-width: 820px;
  width: calc(100% + (2 * clamp(1rem, 3vw, 2rem)));
  margin-inline: calc(-1 * clamp(1rem, 3vw, 2rem));
  margin-top: 2.25rem;
  padding: 1.25rem clamp(1rem, 3vw, 2rem) 1.35rem;
  border-top: 1px solid var(--line);
  background: transparent;
}

.word-search-print-answer-page {
  margin-top: 3rem;
  border-top: 1px solid var(--line);
}

.word-search-answer-plate h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
}

.word-search-answer-grid {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  background: var(--paper);
}

@media (max-width: 720px) {
  .word-search-answer:not(.word-search-print) .word-search-answer-plate {
    width: 100%;
    margin-inline: 0;
  }
}

.word-search-answer-row {
  position: relative;
  z-index: 3;
  gap: 0;
}

.word-search-answer-row span {
  position: relative;
  z-index: 3;
  border-color: transparent;
  background: transparent;
}

.word-search-answer-paths {
  position: absolute;
  inset: .35rem;
  z-index: 2;
  width: calc(100% - .7rem);
  height: calc(100% - .7rem);
  overflow: visible;
  pointer-events: none;
}

.word-search-found-path,
.word-search-answer-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: .46;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
}

.word-search-found-path-outline,
.word-search-answer-path-outline {
  fill: none;
  stroke: var(--paper);
  stroke-width: .72;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .98;
}

.print-brandline {
  margin: .85rem 0 0;
  color: var(--muted);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.word-search-grid-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin: 0 0 .85rem;
  padding: .65rem .8rem;
  border-block: 1px solid var(--line);
  color: var(--muted);
}

.word-search-grid-controls__label {
  font-size: .8rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.word-search-grid-control-groups {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .5rem;
}

.word-search-grid-control-group {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  min-height: 2.7rem;
  padding: .2rem .3rem .2rem .55rem;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
}

.word-search-grid-control-group__label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.word-search-font-size-options {
  display: inline-flex;
  gap: .15rem;
}

.word-search-font-size-options .button {
  min-width: 2.75rem;
  padding-inline: .55rem;
}

.word-search-font-size-options [aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}

.word-search-grid-controls .button {
  min-height: 2.75rem;
  padding: .55rem .8rem;
  font-size: .86rem;
}

.word-search-print-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}

.word-search-print-footer__copy {
  min-width: 0;
}

.word-search-print-footer .print-brandline {
  margin-top: 0;
}

.word-search-qr-copy {
  max-width: 22rem;
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .82rem;
}

.word-search-qr {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .6rem;
  width: auto;
  padding: .35rem;
  border: 1px solid var(--line);
  background: var(--paper);
}

.word-search-qr img {
  width: 5.5rem;
  height: auto;
  aspect-ratio: 1;
}

.word-search-qr-copy {
  max-width: 8.5rem;
  margin: 0;
}

.play-preview-note {
  color: var(--muted);
  font-size: .86rem;
}

body.grid-lines-off .word-search-grid button,
body.grid-lines-off .word-search-print-row span,
body.grid-lines-off .word-search-answer-row span {
  border-color: transparent;
  background: transparent;
}

/* Grid lines are optional; a found answer is not. The continuous SVG stroke
   remains visible regardless of the cell-border setting. */
body.grid-lines-off .word-search-grid button[data-state="found"] {
  background: transparent;
  border-color: transparent;
}

body.grid-lines-off .word-search-grid::before,
body.grid-lines-off .word-search-answer-grid::before {
  display: none;
}

body.grid-lines-off .word-search-grid-wrap,
body.grid-lines-off .word-search-print-grid,
body.grid-lines-off .word-search-answer-grid {
  border-color: var(--line);
}

body.print-page .site-header,
body.print-page .site-footer,
body.print-page .breadcrumbs {
  display: none;
}

body.print-page main {
  width: min(100% - 2rem, 900px);
  padding-top: 2rem;
  padding-bottom: 3rem;
}

body.print-page .word-search-print {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}

.answer-key-note {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .9rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.answer-key-mark {
  width: 1.65rem;
  height: .42rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #826712;
  opacity: .74;
}

.word-search-progress {
  margin: 1rem 0 0;
  font-weight: 750;
}

.word-search-words {
  margin-top: 2.25rem;
}

.word-search-words ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem 1.5rem;
  padding-left: 0;
  list-style: none;
}

.word-search-words li {
  min-width: 0;
}

.word-search-words li[data-found="true"] {
  font-weight: 750;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.word-search-word-status {
  display: inline-block;
  margin-inline-start: .55rem;
  color: var(--gold-deep);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 800;
  text-decoration: none;
}

.word-search-actions {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.word-search-actions__intro {
  max-width: 62ch;
  margin: 0 0 .9rem;
}

.word-search-actions__rail {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: stretch;
  margin: 0;
  padding: .45rem;
  border: 1px solid var(--line);
  border-inline-start: .3rem solid var(--gold-deep);
  background: var(--wash);
}

.word-search-actions__rail .word-search-action {
  flex: 1 1 11rem;
  min-height: 2.85rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: inherit;
  font-weight: 700;
  letter-spacing: inherit;
}

.word-search-actions__rail .word-search-action--print {
  box-shadow: 3px 3px 0 var(--gold);
}

.word-search-actions__links {
  margin-top: .95rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 520px) {
  .word-search-words ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem .45rem;
    font-size: .92rem;
  }

  .word-search-print-words ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem .45rem;
    padding-left: 0;
    font-size: .82rem;
  }

  .word-search-grid-controls {
    align-items: flex-start;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .word-search-actions__rail {
    display: grid;
    grid-template-columns: 1fr;
  }

  .word-search-actions__rail .word-search-action {
    width: 100%;
  }

  .word-search-grid-control-groups {
    width: 100%;
    justify-content: stretch;
  }

  .word-search-grid-control-group {
    flex: 1 1 auto;
    justify-content: space-between;
  }

  .word-search-print-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .word-search-qr {
    align-self: flex-end;
  }
}

.print-word-check {
  display: inline-block;
  width: .85rem;
  height: .85rem;
  flex: 0 0 .85rem;
  margin-inline-end: .35rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  vertical-align: -.08em;
}

.word-search-print-words li {
  display: flex;
  align-items: baseline;
  min-width: 0;
  list-style: none;
}

.word-search-print-words ul {
  padding-left: 0;
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  .word-search-grid-wrap {
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  .word-search-grid-wrap,
  .word-search-grid button {
    forced-color-adjust: none;
  }

  .word-search-grid-wrap {
    border-color: CanvasText;
    background: Canvas;
  }

  .word-search-grid::before,
  .word-search-answer-grid::before {
    background:
      repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(8.333333% - 1px),
        CanvasText calc(8.333333% - 1px),
        CanvasText 8.333333%
      ),
      repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(8.333333% - 1px),
        CanvasText calc(8.333333% - 1px),
        CanvasText 8.333333%
      );
  }

  .word-search-grid button {
    border-color: transparent;
    background: transparent;
    color: CanvasText;
  }

  .word-search-grid button:focus-visible {
    outline-color: Highlight;
  }

  .word-search-grid button[data-state="pending"] {
    border: 3px dashed Highlight;
    outline-color: Highlight;
    background: Canvas;
    color: CanvasText;
  }

  .word-search-grid button[data-state="found"] {
    border: 4px double Highlight;
    background: transparent;
    color: CanvasText;
    text-decoration: none;
  }

  .word-search-word-status {
    color: CanvasText;
  }
}

@media print {
  @page {
    /* Let the print dialog choose Letter or A4, while reserving a visible
       paper margin. The sheet below is narrower again so the artifact remains
       centered even when a browser adds its own print chrome. */
    size: auto portrait;
    margin: .35in .4in;
  }

  html,
  body {
    width: 100%;
    overflow: visible;
    background: #fff;
  }

  main {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .word-search-print,
  .word-search-answer {
    width: 100%;
    max-width: none;
  }

  body.print-page main {
    width: 100%;
    padding: 0;
  }

  body.print-page .word-search-print {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    box-shadow: none;
  }

  .word-search-print .page-intro,
  .word-search-answer .page-intro {
    max-width: none;
    margin-bottom: .7rem;
  }

  .word-search-print .page-intro > p:not(.eyebrow) {
    display: none;
  }

  .word-search-print h1,
  .word-search-answer h1 {
    max-width: none;
    font-size: 2.25rem;
  }

  .site-header,
  .site-footer,
  .skip-link,
  .breadcrumbs,
  .word-search-instructions,
  .word-search-actions,
  .print-controls,
  .word-search-progress,
  .word-search-word-status,
  .word-search-grid-controls,
  [data-word-search-status],
  .consent-banner {
    display: none !important;
  }

  .word-search-page {
    max-width: none;
    overflow: visible;
  }

  .word-search-grid-wrap {
    overflow: visible;
    border: 0;
    padding: 0;
  }

  .word-search-print-grid,
  .word-search-answer-grid {
    width: 100%;
    /* Keep both print grids the same size while leaving room for the blank
       puzzle heading and word list on page one of a US Letter print. */
    max-width: 6.25in;
    margin-inline: auto;
    overflow: visible;
    border: 0;
    padding: 0;
  }

  .word-search-print-words {
    width: 100%;
    max-width: 7.75in;
    margin: 0 auto .7rem;
  }

  .word-search-print-words h2,
  .word-search-print h2,
  .word-search-answer h2 {
    margin-bottom: .3rem;
    font-size: 1.35rem;
  }

  .word-search-print-words ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .1rem .8rem;
    margin-top: .3rem;
    font-size: .88rem;
  }

  .word-search-answer-plate {
    width: 100%;
    margin-inline: auto;
    max-width: 7.75in;
    margin-top: .7rem;
    padding: 0;
    border-top: 0;
    background: #fff;
  }

  .word-search-print-answer-page {
    break-before: auto;
    page-break-before: auto;
    margin-top: 0;
    border-top: 0;
  }

  /* Keep each side of the bundled printable as one explicit paper sheet.
     The 9.5in content box fits inside both US Letter and A4, leaving room for
     browser print chrome even when a user has not changed its defaults. */
  .word-search-print-sheet {
    box-sizing: border-box;
    width: calc(100% - .5in);
    max-width: 7.7in;
    margin-inline: auto;
    height: 9.5in;
    overflow: hidden;
    padding-block: .22in;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .word-search-print-sheet--puzzle {
    break-after: page;
    page-break-after: always;
  }

  .word-search-print-sheet--answer {
    break-before: page;
    page-break-before: always;
  }

  .word-search-print-sheet:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .word-search-grid {
    min-width: 0;
    width: 100%;
    gap: 0;
  }

  .word-search-grid [role="row"] {
    gap: 0;
  }

  .word-search-grid button {
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #000;
  }

  .word-search-grid::before,
  .word-search-answer-grid::before {
    background:
      repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(8.333333% - 1px),
        #000 calc(8.333333% - 1px),
        #000 8.333333%
      ),
      repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(8.333333% - 1px),
        #000 calc(8.333333% - 1px),
        #000 8.333333%
      );
  }

  .word-search-print-row,
  .word-search-answer-row {
    width: 100%;
    min-width: 0;
    gap: 0;
  }

  .word-search-print-row span,
  .word-search-answer-row span {
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    font-size: 1.15rem;
  }

  .word-search-answer-grid {
    background: #fff;
  }

  .word-search-answer-grid {
    padding: 0;
  }

  .word-search-answer-paths {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .word-search-answer-row span {
    border-color: transparent;
    background: transparent;
  }

  .word-search-found-path,
  .word-search-answer-path {
    stroke: #bd9819;
    stroke-width: .46;
    opacity: .8;
  }

  .word-search-found-path-outline,
  .word-search-answer-path-outline {
    stroke: #fff;
    stroke-width: .72;
    opacity: .98;
  }

  .word-search-print-grid,
  .word-search-answer-grid,
  .word-search-print section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .answer-key-note {
    color: #000;
  }

  .answer-key-mark {
    background: #000;
    opacity: 1;
  }

  body[data-word-search-font-size="small"] .word-search-print-row span,
  body[data-word-search-font-size="small"] .word-search-answer-row span {
    font-size: 1.15rem;
  }

  body[data-word-search-font-size="medium"] .word-search-print-row span,
  body[data-word-search-font-size="medium"] .word-search-answer-row span {
    font-size: 1.35rem;
  }

  body[data-word-search-font-size="large"] .word-search-print-row span,
  body[data-word-search-font-size="large"] .word-search-answer-row span {
    font-size: 1.55rem;
  }

  .print-brandline {
    margin-top: .45rem;
    color: #000;
    font-size: .65rem;
  }

  .word-search-print-footer {
    margin-top: .16in;
    padding-top: .1in;
    border-top-color: #000;
  }

  .word-search-qr-copy {
    color: #000;
    font-size: .62rem;
    max-width: 1.35in;
  }

  .word-search-qr {
    gap: .08in;
    padding: .04in;
    border-color: #000;
  }

  .word-search-qr img {
    width: .9in;
  }
}

@media (forced-colors: active) {
  .word-search-found-path,
  .word-search-answer-path {
    stroke: Highlight;
    opacity: 1;
  }

  .answer-key-mark {
    background: Highlight;
  }
}