/* Word Search: a sunny puzzle-book page. Highlighter strokes on cream paper, taped snapshots and theme stickers.
   Fonts: Rammetto One (titles), Patrick Hand (the handwritten word list and grid). Scoped to .g-ws / .ws / .ws-*. */
.g-ws {
  --sun: #ffd23f; --sun-2: #ffb81c; --sky: #3fa7f5; --tomato: #ff5a36; --navy: #1f2a44; --navy-2: #46506b;
  --paper: #fffdf5; --paper-2: #fff6d8; --rule: rgba(63,167,245,.18); --margin: rgba(255,90,54,.35);
  --bg-1: #ffe066; --bg-2: #ffc93c; --dot: rgba(255,255,255,.35);
  --hand: "Patrick Hand", "Comic Sans MS", system-ui, sans-serif; --chunk: "Rammetto One", "Arial Black", sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-ws { --bg-1: #3b2350; --bg-2: #6a2f45; --dot: rgba(255,210,63,.10); --paper: #fbf5e2; } }
:root[data-theme="dark"] .g-ws { --bg-1: #3b2350; --bg-2: #6a2f45; --dot: rgba(255,210,63,.10); --paper: #fbf5e2; }

/* ---------- Sunny backdrop ---------- */
.ws-sun { position: relative; overflow: hidden; color: var(--navy);
  background:
    radial-gradient(circle, var(--dot) 1.5px, transparent 2px) 0 0 / 18px 18px,
    repeating-conic-gradient(from 0deg at 90% -10%, rgba(255,255,255,.16) 0 6deg, transparent 6deg 14deg),
    linear-gradient(160deg, var(--bg-1), var(--bg-2)); }
.ws-sun-in { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 18px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 20px; }
.g-ws .backlink { justify-self: start; display: inline-flex; gap: 6px; font-weight: 800; font-size: 14px; text-decoration: none; color: var(--navy); background: var(--paper); padding: 6px 14px; border-radius: 999px; border: 2px solid var(--navy); box-shadow: 3px 3px 0 var(--navy); }
.g-ws .backlink:hover { text-decoration: underline; }

.ws-hero { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 14px 32px; align-items: center; }
.ws-logo { width: 100%; height: auto; display: block; filter: drop-shadow(4px 5px 0 rgba(31,42,68,.25)); }
.ws-intro { background: var(--paper); border: 2px solid var(--navy); border-radius: 14px; padding: 14px 18px; box-shadow: 5px 5px 0 var(--navy); transform: rotate(1deg); max-width: 520px; }
.ws-intro h1 { font-family: var(--chunk); font-weight: 400; font-size: clamp(22px, 2.6vw, 28px); color: var(--navy); }
.ws-intro p { margin: 4px 0 0; color: var(--navy-2); font-size: 16px; }
@media (max-width: 760px) { .ws-hero { grid-template-columns: minmax(0, 1fr); } .ws-logo { max-width: 380px; } .ws-intro { transform: none; } .ws-intro p { font-size: 15px; } }

/* ---------- Layout ---------- */
.ws {
  --m1: #ffe14d; --m2: #ff7ac8; --m3: #7dea7a; --m4: #ffae4d; --m5: #6fd0ff; --m6: #c79bff; --m7: #c8f25a; --m8: #ff8f7a;
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .ws { grid-template-columns: minmax(0, 1fr); } }
.ws .card { background: var(--paper); color: var(--navy); border: 2px solid var(--navy); border-radius: 16px; padding: clamp(14px, 3vw, 24px); box-shadow: 6px 6px 0 var(--navy); min-width: 0; }
.ws .card h2 { font-family: var(--chunk); font-weight: 400; font-size: 22px; color: var(--navy); }
.ws .side { display: grid; gap: 22px; min-width: 0; }

/* The puzzle page: ruled paper, red margin, spiral holes */
.ws .page { position: relative; padding-left: clamp(26px, 5vw, 44px);
  background: linear-gradient(90deg, transparent calc(clamp(26px, 5vw, 44px) - 10px), var(--margin) calc(clamp(26px, 5vw, 44px) - 10px) calc(clamp(26px, 5vw, 44px) - 8px), transparent 0),
              repeating-linear-gradient(180deg, transparent 0 27px, var(--rule) 27px 28px), var(--paper); }
.ws .page::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 18px; width: 12px;
  background: radial-gradient(circle at 6px 6px, var(--bg-2) 0 4.5px, rgba(31,42,68,.5) 5px, transparent 6px) 0 0 / 12px 34px repeat-y; }

.ws .bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; align-items: center; margin-bottom: 16px; }
.ws .head { display: grid; gap: 6px; min-width: 0; }
.ws .kick { font-family: var(--hand); font-size: 18px; color: var(--tomato); line-height: 1; }
.ws .head h2 { font-size: clamp(24px, 4vw, 34px); line-height: 1.05; }
.ws .meta { display: flex; gap: 8px; flex-wrap: wrap; }
.ws .pill { display: inline-flex; align-items: baseline; gap: 6px; background: var(--paper-2); border: 2px solid var(--navy); border-radius: 999px; padding: 3px 12px; font-weight: 800; font-size: 13px; color: var(--navy-2); }
.ws .pill b { font-family: var(--chunk); font-weight: 400; font-size: 17px; color: var(--navy); font-variant-numeric: tabular-nums; }

/* Taped snapshot of the theme */
.ws .snap { margin: 0; width: clamp(96px, 18vw, 150px); background: #fff; padding: 7px 7px 6px; box-shadow: 0 6px 14px rgba(31,42,68,.25); transform: rotate(-4deg); position: relative; display: grid; gap: 4px; }
.ws .snap::before { content: ""; position: absolute; top: -9px; left: 50%; width: 56px; height: 18px; margin-left: -28px; background: rgba(63,167,245,.45); transform: rotate(5deg); }
.ws .snap .pic { aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
.ws .snap .art, .ws .snap .art svg, .ws .snap img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ws .snap .credit { font-size: 10px; line-height: 1.25; color: #5a6178; text-align: center; overflow-wrap: anywhere; }
.ws .snap .credit a { color: inherit; }
@media (prefers-reduced-motion: no-preference) { .ws .snap .art svg, .ws .snap img { animation: ws-in .35s ease-out; } }
@keyframes ws-in { from { transform: scale(.85) rotate(-8deg); opacity: 0; } }

/* Grid */
.ws .board { position: relative; width: 100%; max-width: 600px; margin: 0 auto; aspect-ratio: 1; border-radius: 6px; background: #fff; padding: 2%; border: 2px solid var(--navy); }
.ws .marks { position: absolute; inset: 2%; width: 96%; height: 96%; pointer-events: none; overflow: visible; z-index: 0; mix-blend-mode: multiply; }
.ws .grid { position: relative; z-index: 1; }
.ws .marks line { stroke-width: .8; stroke-linecap: round; fill: none; }
.ws .marks .pv { stroke: var(--sky); opacity: .35; }
.ws .marks .miss { stroke: var(--tomato); opacity: .35; }
.ws .marks .fd { opacity: .82; filter: url(#wsMarker); }
.ws .marks .c1 { stroke: var(--m1); } .ws .marks .c2 { stroke: var(--m2); } .ws .marks .c3 { stroke: var(--m3); } .ws .marks .c4 { stroke: var(--m4); }
.ws .marks .c5 { stroke: var(--m5); } .ws .marks .c6 { stroke: var(--m6); } .ws .marks .c7 { stroke: var(--m7); } .ws .marks .c8 { stroke: var(--m8); }
@media (prefers-reduced-motion: no-preference) { .ws .marks .fd { stroke-dasharray: 20; stroke-dashoffset: 20; animation: ws-draw .35s ease-out forwards; } }
@keyframes ws-draw { to { stroke-dashoffset: 0; } }

.ws .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.ws .cell { display: grid; place-items: center; font-family: var(--hand); font-size: clamp(18px, 4.2vw, 31px); line-height: 1; color: var(--navy); border-radius: 50%; }
.ws .cell.got { color: #000; font-weight: 700; }
.ws .cell.tap { background: var(--sun); color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset; }

.ws .hint { text-align: center; font-family: var(--hand); font-size: 17px; color: var(--navy-2); margin: 12px 0 0; }
.ws .status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Word list: handwritten, crossed off with a highlighter */
.ws .list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
.ws .list li { position: relative; display: flex; align-items: center; gap: 8px; font-family: var(--hand); font-size: 21px; letter-spacing: .03em; padding: 2px 6px; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; color: var(--navy); }
.ws .list li i { width: 14px; height: 14px; border-radius: 3px; border: 2px solid var(--navy); flex: none; background: #fff; }
.ws .list li.found { color: var(--navy-2); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(31,42,68,.6); }
.ws .list li.found i { border-color: var(--navy); background-image: none; }
.ws .list li.found i::after { content: ""; display: block; width: 6px; height: 10px; margin: -2px 0 0 3px; border-right: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy); transform: rotate(40deg); }
.ws .list li[data-col="1"] i { background: var(--m1); } .ws .list li[data-col="2"] i { background: var(--m2); } .ws .list li[data-col="3"] i { background: var(--m3); } .ws .list li[data-col="4"] i { background: var(--m4); }
.ws .list li[data-col="5"] i { background: var(--m5); } .ws .list li[data-col="6"] i { background: var(--m6); } .ws .list li[data-col="7"] i { background: var(--m7); } .ws .list li[data-col="8"] i { background: var(--m8); }
@media (prefers-reduced-motion: no-preference) { .ws .list li.pop { animation: ws-pop .35s ease-out; } }
@keyframes ws-pop { 40% { transform: scale(1.1) rotate(-2deg); } }

/* Buttons */
.ws .btn { font-family: var(--chunk); font-weight: 400; letter-spacing: .02em; border-radius: 12px; border: 2px solid var(--navy); box-shadow: 3px 3px 0 var(--navy); }
.ws .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy); }
.ws .btn.primary { background: var(--tomato); color: #fff; }
.ws .btn.primary:hover { background: #ff7152; }
.ws .btn.ghost { background: #fff; color: var(--navy); }
.ws .btn.ghost:hover, .ws .btn.ghost[aria-expanded="true"] { background: var(--paper-2); }
.ws .optbtn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 6px; }
.ws .optbtn[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.ws .controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ws .controls .btn { flex: 1 1 130px; }
.ws .best { font-size: 13px; font-weight: 700; color: var(--navy-2); margin: 10px 0 0; }
.ws .best b { color: var(--navy); }
.g-ws :focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

/* Options: theme stickers and level */
.ws .stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 12px; }
.ws .sticker { font: inherit; display: grid; justify-items: center; gap: 2px; padding: 6px 4px 5px; background: #fff; color: var(--navy); border: 2px solid transparent; border-radius: 12px; cursor: pointer; font-family: var(--hand); font-size: 15px; line-height: 1.1; }
.ws .sticker svg { width: 46px; height: 46px; filter: drop-shadow(0 2px 0 rgba(31,42,68,.2)); }
.ws .sticker:hover { border-color: rgba(31,42,68,.35); }
.ws .sticker[aria-pressed="true"] { border-color: var(--navy); background: var(--paper-2); box-shadow: 2px 2px 0 var(--navy); }
@media (prefers-reduced-motion: no-preference) { .ws .sticker svg { transition: transform .15s; } .ws .sticker:hover svg { transform: rotate(-8deg) scale(1.08); } }
.ws .lvwrap { margin-top: 16px; }
.ws .lab { display: block; font-size: 13px; font-weight: 800; color: var(--navy-2); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .08em; }
.ws .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: var(--paper-2); padding: 5px; border-radius: 14px; border: 2px solid var(--navy); }
.ws .seg button { font: inherit; font-family: var(--chunk); font-weight: 400; font-size: 14px; line-height: 1.2; border: 0; border-radius: 10px; padding: 8px 4px; background: transparent; color: var(--navy-2); cursor: pointer; }
.ws .seg button small { display: block; font-family: var(--hand); font-size: 14px; opacity: .9; }
.ws .seg button[aria-pressed="true"] { background: var(--sun); color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset; }

/* Completion */
.ws .done { position: relative; margin-top: 16px; padding: 18px; border-radius: 12px; background: var(--paper-2); border: 2px dashed var(--navy); text-align: center; display: grid; gap: 6px; }
.ws .done .stamp { position: absolute; right: 12px; top: -16px; font-family: var(--chunk); font-size: 18px; color: var(--tomato); border: 3px solid var(--tomato); border-radius: 8px; padding: 0 10px; background: var(--paper); transform: rotate(8deg); }
.ws .done h3 { font-family: var(--chunk); font-weight: 400; font-size: 22px; color: var(--navy); }
.ws .done .big { font-family: var(--chunk); font-size: 44px; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.ws .done p { margin: 0; font-family: var(--hand); font-size: 19px; color: var(--navy-2); }
.ws .done .controls { justify-content: center; margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) { .ws .done:not([hidden]) .stamp { animation: ws-stamp .4s cubic-bezier(.3, 1.6, .5, 1); } }
@keyframes ws-stamp { from { transform: rotate(8deg) scale(2.2); opacity: 0; } }

/* Guide */
.g-ws main > .wrap { padding-top: 8px; }
.g-ws .guide h2, .g-ws .guide h3 { font-family: var(--chunk); font-weight: 400; }
.g-ws .guide h2 { font-size: 28px; }
.g-ws .guide { border: 2px solid var(--navy); box-shadow: 5px 5px 0 var(--sun-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-ws .guide { border-color: #4a4f66; } }
:root[data-theme="dark"] .g-ws .guide { border-color: #4a4f66; }