/* =============================================================
   GAME: Word Search
   ============================================================= */
.board-wordsearch {
  --n: 10; --ws-glow: #ffd166;
  --cell: min(calc((100vw - 66px) / var(--n)), 46px);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px 20px; max-width: 100%;
}
@media (min-width: 1024px) { .board-wordsearch { --cell: min(calc((100vw - 640px) / var(--n)), 46px); } }
.ws-gridwrap {
  position: relative; padding: 8px; border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 209, 102, .12), transparent 60%),
    linear-gradient(160deg, #10305a, #071226 80%);
  box-shadow: 0 0 0 2px var(--ws-glow), 0 0 26px rgba(255, 209, 102, .3), inset 0 0 30px rgba(0, 0, 0, .45), 0 14px 30px rgba(0, 0, 0, .4);
}
@media (max-width: 420px) { .ws-gridwrap { padding: 6px; border-radius: 14px; } .ws-marks { inset: 6px !important; width: calc(100% - 12px) !important; height: calc(100% - 12px) !important; } }
.ws-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n), var(--cell)); touch-action: none; }
.ws-row { display: contents; }
.ws-cell {
  width: var(--cell); height: var(--cell); padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: #eef3ff;
  font: 700 calc(var(--cell) * .5)/1 var(--font-body); text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  -webkit-tap-highlight-color: transparent; transition: color .12s, transform .12s;
}
html[lang="ja"] .ws-cell { font-size: calc(var(--cell) * .46); }
.ws-cell:hover { background: rgba(255, 255, 255, .07); }
.ws-cell:focus { outline: none; }
.ws-cell:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
.ws-hit { color: #fff; text-shadow: 0 0 6px rgba(0, 0, 0, .55); }
.ws-on { color: #0d1630; text-shadow: none; transform: scale(1.08); }
.ws-anchor { box-shadow: inset 0 0 0 2px #fff, 0 0 12px rgba(255, 255, 255, .6); }
.ws-flash { animation: wsFlash .65s ease-in-out infinite alternate; }
@keyframes wsFlash { to { box-shadow: inset 0 0 0 3px var(--ws-glow), 0 0 18px var(--ws-glow); color: var(--ws-glow); } }
.ws-miss { animation: wsMiss .4s ease; color: #ff8a8a; }
@keyframes wsMiss { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.ws-marks { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); z-index: 0; pointer-events: none; overflow: visible; }
.ws-marks line { stroke-width: .76; stroke-linecap: round; }
.ws-found-line { stroke-opacity: .5; animation: wsDraw .35s ease-out; }
.ws-sel-line { stroke-opacity: .85; }
@keyframes wsDraw { from { stroke-opacity: 1; stroke-width: .95; } }
.ws-side { flex: 0 1 230px; min-width: 0; }
.ws-side-h { margin: 2px 0 8px; font: 700 .78rem var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html[lang="ja"] .ws-side-h { letter-spacing: 0; }
.ws-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ws-list li {
  padding: 4px 11px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 700; font-size: .92rem; letter-spacing: .02em; transition: color .2s, box-shadow .2s;
}
.ws-list li.ws-done { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--wc); text-decoration-thickness: 2px; box-shadow: inset 0 0 0 2px var(--wc); }
.ws-list li.ws-pop { animation: wsPop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes wsPop { 40% { transform: scale(1.15); } }
.ws-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ws-clock { color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-time { color: var(--ink); }
@media (max-width: 700px) { .ws-side { flex-basis: 100%; } .ws-list { justify-content: center; } .ws-side-h { text-align: center; } }
@media (prefers-reduced-motion: reduce) { .ws-flash { animation: none; box-shadow: inset 0 0 0 3px var(--ws-glow); } .ws-found-line { animation: none; } }