/* Word Search. Builds on the Kids design system v3 tokens in kids-product.css. */
#kids-wordsearch{--ws-ink:#1d2557;--ws-paper:#fdfdff;--ws-paper-edge:#d9def4;--ws-cell-line:#e6eaf8;
 --ws-h0:#3dd5f3;--ws-h1:#ff8fc8;--ws-h2:#f6c96c;--ws-h3:#62e3ab;--ws-h4:#a594ff;--ws-h5:#ff9f7f;--ws-h6:#7cbcff;--ws-h7:#c3e86a}
.ws-stage{position:relative}
.ws-print-head{display:none}
.ws-heading{display:flex;align-items:center;gap:10px}
.ws-heading-icon{flex:none;width:40px;height:40px;padding:5px;border-radius:12px;background:#eef2ff;box-sizing:border-box}
.ws-levels button{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.ws-levels small{font-size:.7rem;font-weight:700;opacity:.75}
.ws-time[hidden]{display:none!important}

/* ---------- Themes ---------- */
.ws-themes-box{margin:0 0 18px}
.ws-themes-label{margin:0 0 8px!important;font:800 .95rem/1.2 "Manrope",Inter,sans-serif;color:var(--k-muted,#aab3da)!important}
.ws-themes{display:flex;flex-wrap:wrap;gap:8px}
.ws-theme{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:5px 14px 5px 6px;border-radius:999px;border:2px solid var(--k-line,#2a3678);background:var(--k-surface-2,#172154);color:var(--k-ink,#f4f6ff);font:800 .92rem/1.1 "Manrope",Inter,sans-serif;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.ws-theme:hover{border-color:#3b4a9a;background:var(--k-surface-3,#1e2a66)}
.ws-theme[aria-pressed="true"]{border-color:var(--k-cyan,#3dd5f3);background:#123a5c;box-shadow:0 0 0 3px rgba(61,213,243,.2)}
.ws-theme-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#eef2ff}
.ws-theme-icon svg{width:24px;height:24px}

/* ---------- Layout ---------- */
.ws-play{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:clamp(18px,3vw,32px);align-items:start}
.ws-board-col,.ws-side{min-width:0}
.ws-side{display:flex;flex-direction:column;gap:14px}

/* ---------- Paper and grid ---------- */
.ws-paper{max-width:600px;margin:0 auto;padding:clamp(8px,1.6vw,16px);border-radius:26px;background:var(--ws-paper);box-shadow:inset 0 -6px 0 var(--ws-paper-edge),0 18px 40px rgba(2,4,20,.45)}
.ws-board{position:relative;container-type:inline-size;aspect-ratio:1/1;width:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.ws-marks{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ws-grid{position:relative;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer}
.ws-row{display:flex;flex:1 1 0;min-height:0}
.ws-cell{flex:1 1 0;min-width:0;display:grid;place-items:center;border-radius:8px;color:var(--ws-ink);font-family:"Manrope",Inter,sans-serif;font-weight:800;font-size:calc(100cqi / 6 * .5);line-height:1;outline:none;box-shadow:inset 0 0 0 .5px var(--ws-cell-line)}
.ws-n8 .ws-cell{font-size:calc(100cqi / 8 * .52)}
.ws-n10 .ws-cell{font-size:calc(100cqi / 10 * .54);border-radius:6px}
.ws-n12 .ws-cell{font-size:calc(100cqi / 12 * .56);border-radius:5px}
.ws-cell:focus-visible{box-shadow:inset 0 0 0 3px #d99a1e;background:rgba(246,201,108,.28)}
.ws-cell.ws-start{background:rgba(246,201,108,.55);box-shadow:inset 0 0 0 2.5px #d99a1e}
.ws-flash{animation:ws-flash .6s ease-in-out 4;background:rgba(255,143,127,.45);box-shadow:inset 0 0 0 3px #e2563f}
@keyframes ws-flash{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.ws-complete .ws-cell:not(.ws-in-word){color:#9aa3c7}

/* Selection preview and found-word capsules (SVG user units: one cell = 1). */
.ws-sel{stroke:#f6b73c;stroke-width:.74px;stroke-linecap:round;opacity:0}
.ws-sel.ws-sel-on{opacity:.5}
.ws-sel.ws-sel-miss{stroke:#b9c0dc;opacity:.6;animation:ws-miss .45s ease}
@keyframes ws-miss{0%,100%{transform:translateX(0)}25%{transform:translateX(-.08px)}75%{transform:translateX(.08px)}}
.ws-cap-edge{stroke-width:.8px;stroke-linecap:round;opacity:.95}
.ws-cap{stroke-width:.68px;stroke-linecap:round;opacity:.9}
.ws-cap-new{animation:ws-cap .45s cubic-bezier(.2,.9,.3,1.3);transform-box:fill-box;transform-origin:center}
@keyframes ws-cap{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
.ws-hl-0 .ws-cap-edge{stroke:#14a9c9}.ws-hl-0 .ws-cap{stroke:#bdf1fb}
.ws-hl-1 .ws-cap-edge{stroke:#e35ea8}.ws-hl-1 .ws-cap{stroke:#ffd3ea}
.ws-hl-2 .ws-cap-edge{stroke:#d99a1e}.ws-hl-2 .ws-cap{stroke:#ffe7b0}
.ws-hl-3 .ws-cap-edge{stroke:#26a874}.ws-hl-3 .ws-cap{stroke:#c7f4df}
.ws-hl-4 .ws-cap-edge{stroke:#7a63e6}.ws-hl-4 .ws-cap{stroke:#e0d9ff}
.ws-hl-5 .ws-cap-edge{stroke:#e5694f}.ws-hl-5 .ws-cap{stroke:#ffd6ca}
.ws-hl-6 .ws-cap-edge{stroke:#3d86e0}.ws-hl-6 .ws-cap{stroke:#d3e6ff}
.ws-hl-7 .ws-cap-edge{stroke:#7aa82a}.ws-hl-7 .ws-cap{stroke:#e5f6b8}

/* How to play */
.ws-howto{display:flex;align-items:center;justify-content:center;gap:12px;max-width:600px;margin:14px auto 0;padding:10px 16px;border-radius:18px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62)}
.ws-howto p{margin:0!important;font-weight:700;color:var(--k-ink,#f4f6ff)!important;font-size:.98rem}
.ws-howto-art{flex:none;width:120px;height:auto}
.ws-howto-cap{fill:rgba(61,213,243,.3);stroke:var(--k-cyan,#3dd5f3);stroke-width:2}
.ws-howto-l{fill:var(--k-ink,#f4f6ff);font:800 15px "Manrope",Inter,sans-serif;text-anchor:middle}
.ws-howto-dim{opacity:.45}
.ws-howto-dot{fill:var(--k-gold,#f6c96c);stroke:#0c1234;stroke-width:2}
.ws-howto-trail{fill:none;stroke:var(--k-gold,#f6c96c);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 5}
.ws-keys{text-align:center;margin:10px auto 0!important;max-width:560px}

/* ---------- Side panel ---------- */
.ws-progress{padding:14px 16px;border-radius:20px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62)}
.ws-progress-text{margin:0 0 8px!important;font:800 1.05rem/1.2 "Manrope",Inter,sans-serif;color:var(--k-ink,#f4f6ff)!important}
.ws-bar{height:12px;border-radius:999px;background:var(--k-surface-3,#1e2a66);overflow:hidden}
.ws-bar-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--k-cyan,#3dd5f3),var(--k-mint,#62e3ab));transform:scaleX(0);transform-origin:left center;transition:transform .3s ease}
.ws-status{margin:0!important;padding:12px 16px 12px 46px;border-radius:16px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62);min-height:3.4em;position:relative;font-size:1rem!important;line-height:1.4;overflow-wrap:anywhere}
.ws-status:before{content:"";position:absolute;left:16px;top:16px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,var(--k-cyan,#3dd5f3) 20%);box-shadow:0 0 12px rgba(61,213,243,.6)}

.ws-list-box{padding:14px;border-radius:20px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62)}
.ws-list-title{margin:0 0 10px!important;font-size:1rem!important;color:var(--k-ink,#f4f6ff)!important}
.ws-words{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,8.6rem),1fr));gap:8px;grid-auto-flow:dense}
.ws-word-long{grid-column:1/-1}
.ws-word{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 10px 6px 6px;border-radius:14px;background:var(--k-surface-2,#172154);border:2px solid transparent;min-width:0;transition:background .2s,border-color .2s}
.ws-word-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:#eef2ff}
.ws-word-icon svg{width:28px;height:28px}
.ws-word-text{font:800 .98rem/1.15 "Manrope",Inter,sans-serif;letter-spacing:.06em;color:var(--k-ink,#f4f6ff);overflow-wrap:anywhere;min-width:0}
.ws-word-box{display:none}
.ws-word.ws-done{background:transparent;border-color:var(--ws-mark,#3dd5f3)}
.ws-word.ws-done .ws-word-text{text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--ws-mark,#3dd5f3);color:var(--k-muted,#aab3da)}
.ws-word.ws-done .ws-word-icon{box-shadow:0 0 0 3px var(--ws-mark,#3dd5f3)}
.ws-word.ws-hl-0{--ws-mark:var(--ws-h0)}.ws-word.ws-hl-1{--ws-mark:var(--ws-h1)}.ws-word.ws-hl-2{--ws-mark:var(--ws-h2)}.ws-word.ws-hl-3{--ws-mark:var(--ws-h3)}
.ws-word.ws-hl-4{--ws-mark:var(--ws-h4)}.ws-word.ws-hl-5{--ws-mark:var(--ws-h5)}.ws-word.ws-hl-6{--ws-mark:var(--ws-h6)}.ws-word.ws-hl-7{--ws-mark:var(--ws-h7)}
.ws-hinted{border-color:var(--k-coral,#ff8f7f);animation:ws-nudge .5s ease 2}
.ws-pop{animation:ws-pop .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes ws-pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes ws-nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-3px)}70%{transform:translateX(3px)}}

.ws-actions{margin-top:0!important;display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
.ws-actions .kp-button{min-height:56px;padding-inline:12px}
#ws-timer[aria-pressed="true"]{border-color:var(--k-mint,#62e3ab);color:var(--k-mint,#62e3ab)}

.ws-win{margin-top:0!important;outline:none;padding:20px 16px!important}
.ws-win:focus-visible{outline:4px solid var(--k-gold,#f6c96c);outline-offset:3px}
.ws-win h3{margin:0 0 4px!important}
.ws-win-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ws-win-actions .kp-button{min-height:56px;padding-inline:10px}
#ws-new-win{grid-column:1/-1}
.ws-win-actions [hidden]{display:none}
.ws-win-actions:has(#ws-harder[hidden]) #ws-other{grid-column:1/-1}
.ws-star{width:52px;height:52px;fill:#2c3770;stroke:#4a568f;stroke-width:1;stroke-linejoin:round}
.ws-star-on{fill:var(--k-gold,#f6c96c);stroke:#c79a3a;filter:drop-shadow(0 4px 10px rgba(246,201,108,.45))}
@keyframes ws-star{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.ws-win:not([hidden]) .ws-star{animation:ws-star .5s cubic-bezier(.2,.9,.3,1.3) both}
.ws-win:not([hidden]) .ws-star:nth-child(2){animation-delay:.15s}
.ws-win:not([hidden]) .ws-star:nth-child(3){animation-delay:.3s}

.ws-stage .kp-button:focus-visible,.ws-stage .kg-levels button:focus-visible,.ws-theme:focus-visible{outline:4px solid var(--k-gold,#f6c96c);outline-offset:3px}
#kids-wordsearch .kg-hero h1,#kids-wordsearch .kg-hero .kp-lede{overflow-wrap:anywhere}

/* ---------- Responsive ---------- */
@media(max-width:900px){
 .ws-play{grid-template-columns:1fr;row-gap:14px}
 .ws-board-col{display:contents}
 .ws-paper{order:1;width:100%;box-sizing:border-box}
 .ws-side{order:2;max-width:600px;width:100%;margin:0 auto}
 .ws-howto{order:3;margin-top:0;width:100%;box-sizing:border-box}
 .ws-keys{order:4;margin-top:0!important}
}
@media(max-width:600px){
 .ws-stage .kg-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;border-radius:20px;box-sizing:border-box}
 .ws-stage .kg-levels button{border-radius:15px;padding:6px 2px;font-size:.84rem}
 .ws-themes{flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
 .ws-theme{flex:none;scroll-snap-align:start}
 .ws-paper{margin-inline:-6px;width:calc(100% + 12px)}
 .ws-paper{border-radius:20px;padding:6px}
 .ws-howto{flex-direction:column;gap:4px;text-align:center}
}
@media(max-width:380px){
 .ws-stage .kg-levels{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ws-actions,.ws-win-actions{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 .ws-flash,.ws-cap-new,.ws-pop,.ws-hinted,.ws-star,.ws-sel-miss{animation:none!important}
 .ws-theme,.ws-word,.ws-bar-fill{transition:none!important}
}

/* ---------- Print: the grid and the word list, black and white on A4 ---------- */
@media print{
 @page{size:A4;margin:14mm}
 #kids-wordsearch *{transition:none!important}
 #kids-wordsearch .ws-words .ws-word-long{grid-column:auto}
 .kp-header,.kp-footer,.kids-skip,.kp-back,.kg-hero,.kg-toolbar,.ws-themes-box,.ws-howto,.ws-keys,.ws-progress,.ws-status,.ws-win,.ws-actions,.kg-grownups,.ws-marks{display:none!important}
 .kg-stage.ws-stage{background:#fff!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
 .ws-print-head{display:block;text-align:center;margin:0 0 6mm}
 .ws-print-head p{margin:0 auto 2mm!important;font-size:12pt;color:#000!important}
 .ws-print-head .ws-print-title{font:800 22pt/1.2 "Manrope",Inter,sans-serif;margin-bottom:3mm!important}
 .ws-print-head .ws-print-name{text-align:left;margin-top:4mm!important}
 .ws-play{display:block}
 .ws-board-col{margin:0}
 .ws-paper{width:150mm;max-width:none;margin:0 auto;padding:0;border-radius:0;background:#fff;box-shadow:none;break-inside:avoid}
 .ws-board{border:1.5pt solid #000}
 .ws-cell{color:#000!important;box-shadow:inset 0 0 0 .4pt #999!important;background:#fff!important;border-radius:0!important;animation:none!important}
 .ws-side{display:block;max-width:170mm;margin:6mm auto 0}
 .ws-list-box{background:#fff;border:0;padding:0}
 .ws-list-title{color:#000!important;font-size:13pt!important}
 .ws-words{grid-template-columns:repeat(3,1fr);gap:3mm}
 #kids-wordsearch .ws-words .ws-word{background:#fff!important;border-radius:3mm;border:.6pt solid #888!important;min-height:0;padding:2mm;break-inside:avoid}
 .ws-word-icon{background:#fff;box-shadow:none!important;filter:grayscale(1)}
 .ws-word-text{color:#000!important;text-decoration:none!important;font-size:11pt;letter-spacing:.04em}
 .ws-word-box{display:block;margin-left:auto;flex:none;width:5mm;height:5mm;border:1pt solid #000}
}