/* Word Search: highlighter on a photocopied puzzle sheet. */
:root {
  --paper: #f6f1e6; --paper-ink: #1f1b16; --marker: #0f766e;
  --bg: #e9e3d6; --surface: #f6f1e6; --surface-2: #ece6d8; --ink: #1f1b16; --ink-2: #6b6459; --line: #d3cbbb;
  --ok: #0f766e; --warn: #d9a521; --bad: #d64545; --info: #0f766e; --accent: #0f766e; --accent-ink: #fff;
  --font-display: "Fraunces", Georgia, serif; --font-ui: "Nunito", "Inter", system-ui, sans-serif;
  --m1: #fde047; --m2: #f9a8d4; --m3: #86efac; --m4: #93c5fd; --m5: #fdba74; --m6: #c4b5fd; --blend: multiply;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #23262b; --paper-ink: #f1ede4; --bg: #15171b; --surface: #1e2126; --surface-2: #2a2e35; --ink: #f1ede4; --ink-2: #a39d91; --line: #3a3f48; --blend: screen; --m1: #a16207; --m2: #9d174d; --m3: #166534; --m4: #1e40af; --m5: #9a3412; --m6: #5b21b6; --marker: #2dd4bf; } }
:root[data-theme="dark"] { --paper: #23262b; --paper-ink: #f1ede4; --bg: #15171b; --surface: #1e2126; --surface-2: #2a2e35; --ink: #f1ede4; --ink-2: #a39d91; --line: #3a3f48; --blend: screen; --m1: #a16207; --m2: #9d174d; --m3: #166534; --m4: #1e40af; --m5: #9a3412; --m6: #5b21b6; --marker: #2dd4bf; }
:root[data-colorblind="1"] { --m1: #e69f00; --m2: #56b4e9; --m3: #009e73; --m4: #f0e442; --m5: #0072b2; --m6: #cc79a7; }

.screen { gap: 14px; max-width: 560px; margin-inline: auto; }
.topbar { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.screen-title { font-size: 1.9rem; margin-left: 6px; }
.btn { font-weight: 800; } .btn small { font-weight: 600; opacity: .7; margin-left: 2px; } .cta { font-size: 1.15rem; min-height: 52px; }
.label { color: var(--ink-2); font-size: .9rem; font-weight: 700; margin: 0 0 6px 2px; }
.hero { text-align: center; padding-top: 10px; }
.title { font-size: clamp(2.6rem, 12vw, 3.6rem); font-weight: 700; letter-spacing: -.01em; }
.title .mark { background: linear-gradient(transparent 22%, color-mix(in srgb, var(--m1) 85%, transparent) 22% 88%, transparent 88%); padding: 0 .08em; border-radius: 4px; }
.tagline { color: var(--ink-2); margin-top: 4px; font-weight: 600; }
.streak-pill { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface); color: var(--warn); font-weight: 800; box-shadow: var(--shadow-1); }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; min-height: 64px; border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; box-shadow: var(--shadow-1); border: 2px solid transparent; }
.mode b { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; } .mode span { color: var(--ink-2); font-size: .82rem; line-height: 1.2; font-weight: 600; }
.mode[aria-pressed="true"] { border-color: var(--marker); }
.themes { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 8px; margin: 0 -4px; scrollbar-width: none; }
.theme-chip { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-1); font-weight: 800; border: 2px solid transparent; }
.theme-chip[aria-checked="true"] { border-color: var(--marker); background: color-mix(in srgb, var(--marker) 12%, var(--surface)); }
.seg-line { display: flex; background: var(--surface); border-radius: var(--r-pill); padding: 3px; box-shadow: var(--shadow-1); }
.seg-line button { flex: 1; height: 48px; border-radius: var(--r-pill); color: var(--ink-2); font-weight: 800; font-size: .95rem; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; } .seg-line button small { font-size: .7rem; font-weight: 700; opacity: .8; } .seg-line button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.home-actions { display: flex; gap: 8px; } .home-actions .cta { flex: 2; } .home-actions > .btn:not(.cta) { flex: 1; background: var(--surface); box-shadow: var(--shadow-1); }

/* Play */
.screen[data-screen="play"] { height: 100dvh; min-height: 0; overflow: hidden; gap: 8px; }
.hud { gap: 8px; } .hud-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; white-space: nowrap; } .hud-note { color: var(--ink-2); font-weight: 800; white-space: nowrap; }
.sheet-paper { background: var(--paper); border-radius: 6px; padding: 8px; box-shadow: var(--shadow-2), inset 0 0 40px rgb(0 0 0 / .04); background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgb(0 0 0 / .012) 3px 4px); flex: 0 0 auto; width: min(100%, calc(100dvh - 250px), 560px); margin-inline: auto; }
.grid-wrap { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); aspect-ratio: 1; }
.cell { display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 800; font-size: var(--fs); color: var(--paper-ink); text-transform: uppercase; aspect-ratio: 1; min-width: 0; cursor: crosshair; border-radius: 4px; }
.cell[data-cursor="true"] { outline: 2px solid var(--marker); outline-offset: -2px; }
.cell[data-hint="true"] { animation: hint-ring 1.2s ease-out 3; } @keyframes hint-ring { 0% { box-shadow: 0 0 0 0 var(--marker); } 100% { box-shadow: 0 0 0 10px transparent; } }
.cell.anim-pop { animation: pop var(--t-slow) var(--ease-spring); }
.marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: var(--blend); overflow: visible; }
.marks line { stroke-width: .78; stroke-linecap: round; fill: none; opacity: .75; }
.marks line.live { stroke: var(--marker); opacity: .55; }
.marks line.miss { animation: fade-out .35s forwards; } @keyframes fade-out { to { opacity: 0; } }
.marks line.found { animation: ink-in .3s var(--ease-out); } @keyframes ink-in { from { opacity: 0; stroke-width: .5; } }
.play-msg { text-align: center; min-height: 1.3em; color: var(--ink-2); font-weight: 700; font-size: .95rem; }
.words { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; overflow-y: auto; min-height: 0; flex: 1 1 auto; align-content: flex-start; }
.word-chip { position: relative; padding: 5px 11px; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-1); font-weight: 800; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
.word-chip[data-found="true"] { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--wc); background: color-mix(in srgb, var(--wc) 30%, var(--surface)); animation: pop var(--t-slow) var(--ease-spring); }
.word-chip.hidden-count { text-transform: none; letter-spacing: 0; }
.tools { display: flex; gap: 8px; justify-content: center; padding-bottom: env(safe-area-inset-bottom); } .tools .btn { background: var(--surface); box-shadow: var(--shadow-1); min-height: 46px; }
@media (min-width: 640px) { .screen[data-screen="play"] { max-width: 640px; } }

/* Result */
.result-verdict { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 2.8rem); text-align: center; font-weight: 700; line-height: 1.1; } .result-verdict[data-won="false"] { color: var(--bad); }
.result-sub { text-align: center; color: var(--ink-2); font-weight: 600; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; } .result-actions .cta { grid-column: 1 / -1; }