/* WordHub word search — paper board, ink letters, soft highlighter strokes.
   Relies on editorial tokens from editorial-pages.css. */
.ws-layout { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.ws-intro p { color: #50514f; line-height: 1.75; max-width: 420px; }
.ws-intro label { margin-top: 26px; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #66645c; }
.ws-intro .btn-group { margin-top: 18px; gap: 10px; }
.ws-intro .arcade-disclaimer { margin-top: 22px; }

.ws-panel { padding: clamp(18px, 3vw, 32px); }
.ws-board-wrap { margin-top: 22px; }
.ws-board {
    --n: 12;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    aspect-ratio: 1;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    touch-action: none;
    user-select: none; -webkit-user-select: none;
    cursor: crosshair;
}
.ws-row { display: contents; }
.ws-marks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.ws-mark, .ws-preview { stroke-linecap: round; stroke-width: .74; fill: none; }
.ws-mark { opacity: .62; }
.ws-preview { stroke: #25272b; opacity: .12; }
.ws-cell {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    font: 600 clamp(.78rem, 1.9vw, 1.28rem)/1 'Inter', sans-serif;
    color: #25272b;
    border-radius: 50%;
    outline: none;
}
.ws-cell.is-found { color: #1d1f22; }
.ws-cell:focus-visible { box-shadow: 0 0 0 2px #82613b; }
.ws-cell.is-anchor { background: #25272b; color: #fffdf8; }
.ws-cell.is-hint { animation: ws-hint 2.4s ease both; }
@keyframes ws-hint { 0%, 100% { background: transparent; } 15%, 70% { background: #e7c46d; } }
.ws-board.is-complete .ws-mark { opacity: .78; }

.ws-words { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 1px solid var(--rule); }
.ws-word { display: grid; gap: 2px; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.ws-word-text { font: 600 .82rem 'Inter', sans-serif; letter-spacing: .12em; color: #25272b; }
.ws-word small { font-size: .66rem; color: #66645c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-word.is-found .ws-word-text { color: #8d877c; text-decoration: line-through; text-decoration-color: var(--mark); text-decoration-thickness: 3px; }
.ws-word.is-found .ws-word-text::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mark); margin-right: 8px; vertical-align: 1px; }
.ws-word.is-found small { white-space: normal; }

@media (max-width: 900px) {
    .ws-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .ws-panel { padding: 14px; }
    .ws-cell { font-size: clamp(.7rem, 3.4vw, .95rem); }
    .ws-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .ws-cell.is-hint { animation: none; background: #e7c46d; } }