/* Word Search page (frame, header and dialogs come from css/shell.css) */
.board-wrap {
  grid-area: board;
  position: relative;
  min-height: 0;
  margin: 0 12px 12px;
  overflow: hidden;
  border-radius: 20px;
  border: 4px solid var(--board-edge);
  background: var(--paper);
}
html.high-contrast .board-wrap { border-color: #fff; }

/* The puzzle: the grid and the word list, side by side on wide screens and one above the other on tall ones */
.ws { height: 100%; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 16px; }
.ws.tall { flex-direction: column; gap: 10px; padding: 8px; }

.grid-box {
  flex: none;
  padding: 6px;
  background: var(--grid-bg);
  border: 3px solid var(--wood-dark);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(60, 35, 10, 0.18);
}
html.high-contrast .grid-box { border-color: #fff; box-shadow: none; }
.grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 8), var(--cell, 40px));
  grid-template-rows: repeat(var(--n, 8), var(--cell, 40px));
  width: calc(var(--n, 8) * var(--cell, 40px));
  height: calc(var(--n, 8) * var(--cell, 40px));
  touch-action: none;   /* so a finger can drag across letters without the page scrolling */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  outline: none;
}
.grid:focus-visible { outline: 4px solid var(--focus); outline-offset: 6px; border-radius: 4px; }

.cell {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  font: 800 calc(var(--cell, 40px) * 0.6) / 1 Verdana, "Segoe UI", Arial, sans-serif;
  color: #1f1408;
  pointer-events: none;
}
html.high-contrast .cell { color: #000; }

/* The first tapped letter: a clear yellow disc with a blue ring */
.cell.start::before {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: -1;
  border-radius: 50%;
  background: var(--select);
  border: 4px solid var(--select-ring);
}
/* Hint: the first letter of a word glows green */
.cell.hint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: rgba(21, 128, 61, 0.28);
  border: 4px solid var(--hint-ring);
  box-shadow: 0 0 14px 4px rgba(21, 128, 61, 0.55);
  animation: glow 0.9s ease-in-out infinite alternate;
}
html.high-contrast .cell.hint::before { background: rgba(0, 255, 102, 0.35); }
.grid:focus-visible .cell.cursor::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 3px dashed var(--focus);
  border-radius: 6px;
}
.cell.wrong { animation: shake 0.35s ease; }
@keyframes glow { from { transform: scale(0.92); } to { transform: scale(1.08); } }
@keyframes shake {
  0%, 100% { translate: 0 0; }
  25% { translate: -4px 0; }
  75% { translate: 4px 0; }
}

/* Found words: a soft coloured pill over the letters */
.pills { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pill {
  position: absolute;
  left: calc(var(--cell, 40px) * var(--x));
  top: calc(var(--cell, 40px) * var(--y));
  width: calc(var(--cell, 40px) * var(--len));
  height: calc(var(--cell, 40px) * 0.84);
  transform: translate(-50%, -50%) rotate(var(--a));
  border-radius: 999px;
  border: 3px solid transparent;
}
.pill.preview { background: rgba(30, 58, 138, 0.2); border-color: rgba(30, 58, 138, 0.65); border-style: dashed; }
.p0 { background: rgba(255, 138, 101, 0.55); border-color: rgba(214, 78, 30, 0.75); --sw: #ff8a65; }
.p1 { background: rgba(129, 199, 132, 0.6); border-color: rgba(46, 125, 50, 0.75); --sw: #81c784; }
.p2 { background: rgba(100, 181, 246, 0.55); border-color: rgba(21, 101, 192, 0.75); --sw: #64b5f6; }
.p3 { background: rgba(255, 213, 79, 0.7); border-color: rgba(191, 144, 0, 0.8); --sw: #ffd54f; }
.p4 { background: rgba(186, 104, 200, 0.45); border-color: rgba(123, 31, 162, 0.7); --sw: #ba68c8; }
.p5 { background: rgba(77, 208, 225, 0.55); border-color: rgba(0, 131, 143, 0.75); --sw: #4dd0e1; }
.p6 { background: rgba(240, 98, 146, 0.45); border-color: rgba(194, 24, 91, 0.7); --sw: #f06292; }
.p7 { background: rgba(174, 213, 129, 0.7); border-color: rgba(85, 139, 47, 0.8); --sw: #aed581; }
html.high-contrast .pill:not(.preview) { background: rgba(255, 212, 0, 0.5); border-color: #ffd400; border-width: 4px; }

/* The word list */
.words { flex: none; min-width: 0; display: flex; flex-direction: column; max-height: 100%; }
.words h2 { margin: 0 0 0.4rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; line-height: 1.2; color: var(--heading); }
.ws.wide .words { overflow-y: auto; }
.word-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.ws.wide .word-list { display: grid; grid-template-columns: 1fr; gap: 0.4rem; }
.ws.wide .word-list.two { grid-template-columns: 1fr 1fr; }
.word {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25em 0.7em 0.25em 0.45em;
  background: var(--card);
  border: 2px solid var(--card-edge);
  border-radius: 999px;
  font: 800 min(1.08rem, 22px) / 1.3 Verdana, "Segoe UI", Arial, sans-serif;   /* big, but it stops growing so the grid keeps its room */
  letter-spacing: 0.04em;
  color: var(--ink);
}
html.high-contrast .word { background: #000; border-color: #fff; }
.word .sw { flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--card-edge); display: grid; place-items: center; }
.word .sw svg { width: 80%; height: 80%; display: none; }
.word.found { background: transparent; border-style: dashed; color: var(--found-ink); }
.word.found .wtxt { text-decoration: line-through; text-decoration-thickness: 3px; }
.word.found .sw { background: var(--sw, #81c784); border-color: rgba(0, 0, 0, 0.35); }
.word.found .sw svg { display: block; }
.word.hintword { animation: glow 0.9s ease-in-out 3 alternate; border-color: var(--hint-ring); }

/* How to play pictures and the win screen */
.hp-row { display: flex; gap: 3px; }
.hp-cell { position: relative; width: 34px; height: 38px; display: grid; place-items: center; font: 800 21px / 1 Verdana, Arial, sans-serif; color: #1f1408; background: var(--grid-bg); border: 2px solid var(--card-edge); border-radius: 6px; }
.hp-cell.start { background: var(--select); border-color: var(--select-ring); }
.hp-cell.end { background: var(--select); border-color: var(--select-ring); }
.hp-pill { display: flex; padding: 3px; border-radius: 999px; background: rgba(129, 199, 132, 0.6); border: 3px solid rgba(46, 125, 50, 0.75); }
.hp-pill .hp-cell { border: 0; background: transparent; width: 26px; height: 32px; font-size: 19px; }
.win-art .letter { width: 52px; height: 60px; display: grid; place-items: center; font: 800 32px / 1 Verdana, Arial, sans-serif; color: #1f1408; background: var(--grid-bg); border: 3px solid var(--card-edge); border-radius: 10px; box-shadow: 3px 3px 0 var(--tile-side); }
.win-art .letter:nth-child(odd) { background: rgba(255, 213, 79, 0.7); }

/* Phones: the four buttons sit in two rows of two */
@media (max-width: 640px) {
  .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-wrap { margin: 0 6px 8px; border-width: 3px; border-radius: 14px; }
}
/* Phones held upright: the word list is made compact so the grid gets the room (the heading is still there for screen readers) */
@media (max-width: 500px) {
  .ws.tall .words h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ws.tall .word-list { gap: 0.3rem 0.35rem; }
  .ws.tall .word { font-size: min(0.92rem, 22px); padding: 0.15em 0.6em 0.15em 0.4em; gap: 0.35rem; letter-spacing: 0.02em; }
  .ws.tall .word .sw { width: 1rem; height: 1rem; }
}
/* Not enough height for a comfortable grid (Large or Extra large text on a phone, or a phone on its side): the page scrolls.
   game.js sets the height of the board then. */
body.game.scrolls { height: auto; min-height: 100dvh; overflow-y: auto; }

/* ---------- Printing: one large-print page, just the puzzle and its words ---------- */
#print-sheet { display: none; }
@page { margin: 0.5in; }
@media print {
  html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
  body.game { display: block !important; }
  body.game > *:not(#print-sheet) { display: none !important; }
  #print-sheet { display: block; color: #000; font-family: Verdana, "Segoe UI", Arial, sans-serif; text-align: center; }
  #print-sheet h1 { margin: 0 0 0.05in; font: 700 26pt Georgia, "Times New Roman", serif; }
  .ps-sub { margin: 0 0 0.15in; font-size: 14pt; }
  .ps-grid { margin: 0 auto; border-collapse: collapse; table-layout: fixed; width: 6.3in; }
  .ps-grid td {
    width: calc(6.3in / var(--n)); height: calc(6.3in / var(--n)); padding: 0; text-align: center; vertical-align: middle;
    font-weight: 700; font-size: calc(6.3in / var(--n) * 0.56); line-height: 1; border: 1.5pt solid #777;
  }
  .ps-h { margin: 0.18in 0 0.06in; font: 700 17pt Georgia, "Times New Roman", serif; }
  .ps-words { list-style: none; margin: 0 auto; padding: 0; width: 6.8in; columns: 3; column-gap: 0.2in; text-align: left; }
  .ps-words li { margin: 0 0 0.07in; font-size: 16pt; font-weight: 700; letter-spacing: 0.04em; break-inside: avoid; }
  .ps-words .box { display: inline-block; width: 0.17in; height: 0.17in; margin-right: 0.1in; border: 1.5pt solid #000; vertical-align: -0.01in; }
  .ps-foot { margin: 0.12in 0 0; font-size: 10pt; color: #444; }
}