/* Word search play surface and printable-pack panel, shared by word-search.html and the topic pages.
   Colors come from each page's own --accent / --accent-dark / --text, so every topic keeps its theme. */

.ws-play { display: flex; gap: 1.5rem; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.ws-grid-wrap {
  --side: min(540px, calc(100vw - 52px));
  flex: none; padding: 10px; background: #fff; border-radius: 18px; box-shadow: var(--card-shadow);
}
.ws-grid {
  position: relative; width: var(--side); display: grid; grid-template-columns: repeat(var(--n), 1fr);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; outline: none; border-radius: 10px;
}
.ws-grid:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.ws-cell {
  position: relative; z-index: 1; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--side) / var(--n) * .52); font-weight: 700; color: var(--text); line-height: 1;
}
.ws-cell.cursor { box-shadow: inset 0 0 0 2px var(--accent-dark); border-radius: 6px; }
.ws-cell.hinted::before {
  content: ''; position: absolute; inset: 8%; border-radius: 50%; z-index: -1;
  box-shadow: 0 0 0 3px #f59e0b; background: rgba(250, 204, 21, .35); animation: wsGlow 1.2s ease-in-out infinite;
}
@keyframes wsGlow { 50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, .55); } }
@media (prefers-reduced-motion: reduce) { .ws-cell.hinted::before { animation: none; } }

.ws-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.ws-marks line { stroke-linecap: round; stroke-width: .78; }
.ws-cap-found { opacity: .5; }
.ws-cap-sel { stroke: var(--accent); opacity: .35; }
.ws-cap-miss { stroke: #ef4444; opacity: .4; }
.ws-cap-revealed { stroke: #9ca3af; opacity: .45; }
.ws-won .ws-cap-found { animation: wsWin .6s ease 2; }
@keyframes wsWin { 50% { opacity: .8; } }

.ws-side { width: 250px; flex: none; }
.ws-progress { display: flex; justify-content: space-between; font-weight: 800; font-size: .95rem; margin-bottom: .4rem; }
.ws-bar { height: 8px; border-radius: 99px; background: rgba(0, 0, 0, .08); overflow: hidden; margin-bottom: .9rem; }
.ws-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); transition: width .3s; }
.ws-words { list-style: none; columns: 2; column-gap: 1rem; padding: 0; margin: 0; }
.ws-words li { break-inside: avoid; display: flex; align-items: center; gap: .45rem; padding: .22rem 0; font-weight: 700; font-size: .98rem; }
.ws-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; opacity: .35; }
.ws-words li.found { text-decoration: line-through; opacity: .55; }
.ws-words li.found .ws-dot { border-color: transparent; opacity: 1; }
.ws-words li.hinted { color: #b45309; }
.ws-words li.revealed { color: #9ca3af; font-style: italic; }
.ws-dirs { margin-top: .8rem; font-size: .85rem; opacity: .75; }
.ws-empty { padding: 3rem 1rem; text-align: center; font-weight: 600; max-width: 420px; }

@media (max-width: 900px) {
  .ws-side { width: min(560px, calc(100vw - 32px)); }
  .ws-words { columns: 3; }
}
@media (max-width: 420px) { .ws-words { columns: 2; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Own words (hub) ── */
.ws-own { max-width: 720px; margin: 0 auto 1.2rem; padding: 0 1rem; }
.ws-own label { display: block; font-weight: 800; margin-bottom: .35rem; }
.ws-own textarea {
  width: 100%; min-height: 96px; padding: .7rem .8rem; border: 2px solid var(--accent); border-radius: .7rem;
  font: inherit; font-size: .98rem; color: var(--text); background: #fff; resize: vertical;
}
.ws-own-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .5rem; }
.ws-own-row p { font-size: .88rem; opacity: .8; flex: 1; min-width: 200px; }

/* ── Printable pack ── */
.ws-pack { max-width: 900px; margin: 0 auto 2rem; padding: 0 1rem; }
.ws-pack-box { background: #fff; border-radius: 1rem; box-shadow: var(--card-shadow); }
.ws-pack-box summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 800; font-size: 1.05rem; list-style-position: inside; }
.ws-pack-box summary span { display: block; font-weight: 600; font-size: .88rem; opacity: .7; margin-left: 1.3rem; }
.ws-pack-body { display: flex; gap: 1.5rem; flex-wrap: wrap; padding: 0 1.2rem 1.2rem; }
.ws-pack-form { flex: 1; min-width: 260px; display: grid; gap: .65rem; align-content: start; }
.ws-pack-field { display: grid; gap: .2rem; font-weight: 700; font-size: .9rem; }
.ws-pack-field input { padding: .45rem .7rem; border: 2px solid rgba(0, 0, 0, .15); border-radius: .6rem; font: inherit; font-size: .95rem; color: var(--text); }
.ws-pack-field input:focus { border-color: var(--accent); outline: none; }
.ws-pack-check { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem; }
.ws-pack-check input { accent-color: var(--accent-dark); width: 17px; height: 17px; }
.ws-pack-go { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }
.btn-ghost { background: #fff; color: var(--accent-dark); border: 2px solid var(--accent); }
.ws-pack-note { font-size: .88rem; min-height: 1.3em; }
.ws-pack-preview { flex: none; margin: 0 auto; text-align: center; }
.ws-pack-preview canvas { display: block; border-radius: 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, .16); background: #fff; }
.ws-pack-preview figcaption { font-size: .82rem; opacity: .7; margin-top: .4rem; }

/* ── Topic cards (hub and topic pages) ── */
.ws-topics { max-width: 1000px; margin: 0 auto; padding: 1rem 1.5rem 2rem; text-align: center; }
.ws-topics h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; margin-bottom: .3rem; }
.ws-topics > p { opacity: .8; margin-bottom: 1.4rem; }
.ws-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.ws-topic-card {
  background: #fff; border-radius: 1rem; padding: 1rem .8rem 1.1rem; box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; align-items: center; gap: .25rem; transition: transform .2s;
}
.ws-topic-card:hover { transform: translateY(-4px); }
.ws-topic-card .tc-emoji { font-size: 2rem; line-height: 1.2; }
.ws-topic-card .tc-name { font-weight: 800; font-size: .98rem; }
.ws-topic-card .tc-hook { font-size: .8rem; opacity: .75; line-height: 1.35; }
.ws-topic-card[aria-current] { outline: 3px solid var(--accent); }