/* Wordsearch: scoped app surfaces, with theme chrome retained on shortcode pages. */
.ws-app-page { margin: 0; background: #171b2c; color: #f7f6f2; color-scheme: dark; }
.ws-app-page #ws-main { margin: 0; padding: 0; }
.ws-app, .ws-dialog { --ws-ink: #f7f6f2; --ws-muted: #a3a8bd; --ws-accent: #d9f588; --ws-line: #363b50; --ws-panel: #202537; font: 400 15px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.015em; color: var(--ws-ink); }
.ws-app *, .ws-dialog * { box-sizing: border-box; }
.ws-app { max-width: 1120px; padding: 0 40px; margin: 0 auto; background: #171b2c; border-radius: 28px; }
.ws-app button, .ws-dialog button { font: inherit; cursor: pointer; }
.ws-app button, .ws-app a, .ws-dialog button, .ws-dialog a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ws-app a, .ws-dialog a { text-decoration: none; }
.ws-app button:disabled, .ws-dialog button:disabled { cursor: default; opacity: .5; }
.ws-app :focus-visible, .ws-dialog :focus-visible { outline: 3px solid #bcb4ff; outline-offset: 5px; }
.ws-app button, .ws-dialog button { transition: background .18s, transform .18s, color .18s; }
.ws-app button:active:not(:disabled), .ws-dialog button:active:not(:disabled) { transform: scale(.96); }
.ws-topbar { height: 110px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ws-line); gap: 18px; }
.ws-brand { display: flex; align-items: center; gap: 12px; color: var(--ws-ink); font-weight: 750; font-size: 24px; letter-spacing: -.9px; line-height: 1.1; }
.ws-brand:hover { color: white; }
.ws-brand-mark { width: 45px; height: 45px; border-radius: 14px; background: var(--ws-accent); color: #171b2c; display: grid; place-content: center; font-size: 34px; position: relative; transform: rotate(-6deg); padding-bottom: 6px; }
.ws-brand-mark span { position: absolute; right: 5px; bottom: 5px; font-size: 21px; }
.ws-brand-light { font-weight: 350; }
.ws-brand small { display: block; font-size: 8px; font-weight: 550; letter-spacing: 2px; margin-top: 7px; color: var(--ws-muted); }
.ws-top-actions { display: flex; align-items: center; gap: 9px; }
.ws-icon-button, .ws-avatar { width: 40px; height: 40px; border: 1px solid var(--ws-line); border-radius: 50%; background: transparent; color: #c2c5d4; display: grid; place-items: center; font-size: 19px; }
.ws-icon-button:hover { background: var(--ws-panel); color: white; }
.ws-icon-button[aria-pressed="true"] { color: var(--ws-muted); text-decoration: line-through; }
.ws-avatar { background: #c7baf3; border-color: #c7baf3; color: #28263c; margin-left: 8px; }
.ws-avatar svg { width: 21px; height: 21px; }
.ws-heading { padding: 38px 0 29px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ws-eyebrow { font-size: 10px; line-height: 1.5; font-weight: 700; letter-spacing: 2px; margin: 0 0 9px; color: var(--ws-muted); }
.ws-heading .ws-eyebrow { color: #d9f588; display: flex; align-items: center; gap: 8px; }
.ws-dot { display: inline-block; height: 5px; width: 5px; border-radius: 50%; background: currentColor; }
.ws-heading h1 { margin: 0; font: 600 clamp(26px, 3.6vw, 40px)/1.18 ui-sans-serif, system-ui, sans-serif; letter-spacing: -1.4px; color: var(--ws-ink); overflow-wrap: anywhere; }
.ws-subtitle { color: var(--ws-muted); font-size: 14px; margin: 10px 0 0; }
.ws-level { flex-shrink: 0; display: flex; align-items: center; gap: 8px; color: #d9f588; border: 1px solid #444c3f; background: #242d2b; padding: 8px 13px; border-radius: 30px; font-size: 12px; }
.ws-level span:last-child { color: #aab5a6; }
.ws-play-layout { display: grid; grid-template-columns: minmax(0, 1fr) 302px; gap: 28px; align-items: start; }
.ws-board-column { min-width: 0; }
.ws-stats { height: 68px; display: flex; align-items: center; gap: 36px; padding: 0 22px; background: #24293c; border-radius: 20px 20px 0 0; }
.ws-stats > div { display: flex; align-items: center; gap: 12px; }
.ws-stat-label { color: #a5abc2; font-size: 9px; font-weight: 650; letter-spacing: 1.5px; }
.ws-stats strong { font-size: 20px; letter-spacing: -.4px; font-weight: 550; font-variant-numeric: tabular-nums; }
.ws-pause-button { margin-left: auto; background: #33394f; border: 0; border-radius: 10px; color: #e3e4ec; width: 36px; height: 36px; display: grid; place-items: center; }
.ws-pause-button svg { width: 17px; height: 17px; }
.ws-board-wrap { position: relative; padding: 15px; background: #f7f7f2; border-radius: 0 0 20px 20px; overflow: hidden; box-shadow: 0 20px 55px -25px #060b23; }
.canvas-scroll-container { width: 100%; overflow: auto; overscroll-behavior: contain; border-radius: 8px; }
#word-search-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
#word-search-canvas:focus-visible { outline-offset: -3px; }
.ws-board-caption { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px; font-size: 11px; color: #a3a8bd; }
#ws-selection { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-board-dots { display: flex; gap: 4px; }
.ws-board-dots i { width: 5px; height: 5px; background: #c7baf3; border-radius: 50%; }
.ws-board-dots i:nth-child(2) { background: #d9f588; }.ws-board-dots i:nth-child(3) { background: #f1bc93; }
.ws-tools { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 9px; }
.ws-tool { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; min-height: 46px; background: #24293c; border: 1px solid #32384b; color: #c6cadb; border-radius: 12px; font-size: 11px !important; }
.ws-tool:hover { background: #343b51; color: white; }
.ws-tool svg { width: 18px; height: 18px; flex-shrink: 0; }
#hints-button { color: #e0f4a5; background: #2b322e; border-color: #3f4a36; }
#ws-hints-left { font-size: 10px; background: #d9f588; color: #263321; border-radius: 6px; width: 19px; height: 19px; display: grid; place-items: center; }
.ws-word-panel { padding: 25px 23px 20px; background: #202537; border: 1px solid #32374a; border-radius: 20px; }
.ws-word-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ws-word-panel h2 { color: #eeedf4; font-size: 20px; line-height: 1.3; font-weight: 550; letter-spacing: -.5px; margin: 0; max-width: 160px; }
.ws-word-panel .ws-eyebrow { font-size: 9px; letter-spacing: 1.7px; }
.ws-progress-ring { --progress: 0%; width: 53px; height: 53px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(#d9f588 var(--progress), #383e52 0); display: grid; place-items: center; }
.ws-progress-ring span { width: 45px; height: 45px; background: #202537; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #d9f588; font-weight: 600; }
.ws-progress-copy { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #abb0c4; margin-top: 28px; }
.ws-progress-copy strong { color: #e7e9f1; font-size: 12px; font-weight: 550; }
.ws-progress-track { height: 3px; background: #383e52; border-radius: 4px; margin: 10px 0 20px; overflow: hidden; }
#ws-progress-fill { display: block; height: 100%; width: 0; background: #d9f588; transition: width .4s ease; }
.ws-word-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; list-style: none; padding: 0; margin: 0; }
.ws-word-list li { padding: 10px 10px 10px 13px; border: 1px solid #3a4054; border-radius: 9px; color: #d0d3e1; font-size: 11px; font-weight: 650; letter-spacing: .7px; overflow-wrap: anywhere; position: relative; transition: background .2s, color .2s, border-color .2s; }
.ws-word-list li.word-found-success { background: var(--word-color, #d9f588); border-color: var(--word-color, #d9f588); color: #252b3a; text-decoration: line-through; }
.ws-word-list li.word-found-success::after { content: '✓'; position: absolute; right: 7px; font-size: 10px; }
.ws-word-list li.failed-word { opacity: .45; text-decoration: line-through; }
.ws-word-tip { color: #9fa6bf; font-size: 11px; line-height: 1.65; margin: 20px 0; }
.ws-discovery-card { border-top: 1px solid #363b50; padding-top: 20px; display: flex; align-items: center; gap: 18px; }
.ws-discovery-art { display: block; position: relative; width: 65px; height: 63px; flex-shrink: 0; color: #252a3a; background: #c7baf3; border-radius: 12px; font: 600 35px/1.5 Georgia, serif; text-align: center; transform: rotate(-9deg); }
.ws-discovery-art > span { position: absolute; background: #d9f588; width: 35px; height: 39px; border-radius: 8px; right: -8px; bottom: -3px; font-size: 24px; transform: rotate(18deg); }
.ws-discovery-art i { position: absolute; top: -12px; right: -7px; font: 16px Georgia, serif; color: #eac9a7; transform: rotate(15deg); }
.ws-discovery-card p { margin: 0; font-size: 12px; color: #e3e0eb; }
.ws-discovery-card small { display: block; margin-top: 5px; color: #9da4bb; font-size: 11px; }
.ws-bottom-nav { display: flex; align-items: center; justify-content: center; gap: 38px; margin: 30px auto 0; border: 1px solid #34394d; background: #202537; padding: 8px 26px; border-radius: 18px; width: max-content; max-width: 100%; }
.ws-bottom-nav > * { display: flex; align-items: center; justify-content: center; gap: 8px; color: #9fa6bc; background: none; border: 0; padding: 10px 0; font-size: 12px; white-space: nowrap; }
.ws-bottom-nav > * > span { font-size: 19px; }.ws-bottom-nav .ws-nav-active { color: #d9f588; }.ws-bottom-nav button:hover, .ws-bottom-nav a:hover { color: #f7f6f2; }
.ws-footer { display: flex; justify-content: space-between; gap: 20px; padding: 27px 0 30px; color: #81899f; font-size: 10px; }
.ws-footer > span:last-child { letter-spacing: 1.5px; font-size: 8px; }.ws-footer > span:last-child span { color: #bdafd9; margin-left: 6px; }
.ws-pause-cover { position: absolute; inset: 0; z-index: 2; background: #f7f7f2; color: #252a3a; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 24px; text-align: center; }
.ws-pause-cover[hidden] { display: none; }.ws-pause-cover h2 { font-size: 30px; margin: 16px 0 8px; letter-spacing: -.8px; }.ws-pause-cover p { color: #636879; font-size: 13px; margin: 0 0 22px; }
.ws-pause-orbit { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; background: #e3ddf4; border: 10px solid #eeeaf7; font-size: 24px; color: #73648e; }
.ws-primary { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 14px 22px; min-height: 48px; color: #252c26; border: 0; border-radius: 12px; background: #d9f588; font-weight: 650 !important; font-size: 14px !important; text-decoration: none; }
.ws-primary:hover { background: #e3ffa0; color: #252c26; }
.ws-dialog { color-scheme: dark; }
.ws-dialog .modal-content { background: #202537; color: #f7f6f2; border: 1px solid #42485d; border-radius: 24px; box-shadow: 0 30px 100px #070a2066; padding: 10px; }
.ws-dialog .modal-header { border: 0; padding: 22px 22px 10px; gap: 15px; align-items: flex-start; }
.ws-dialog .modal-body { padding: 14px 22px 25px; }.ws-dialog .modal-footer { border-top: 1px solid #393f53; padding: 20px 22px; }
.ws-dialog h2 { font-size: 26px; font-weight: 550; letter-spacing: -.8px; line-height: 1.25; margin: 0; color: #f7f6f2; }
.ws-dialog .btn-close { filter: invert(1); opacity: .65; padding: 12px; flex-shrink: 0; }
.ws-dialog label { display: block; margin: 15px 0 8px; font-size: 12px; font-weight: 550; color: #c4c8d8; }
.ws-dialog input, .ws-dialog select { box-sizing: border-box; width: 100%; max-width: none; background: #171c2d; border: 1px solid #464d63; border-radius: 11px; color: #eeedf4; padding: 13px 14px; height: 50px; font: 14px ui-sans-serif, system-ui, sans-serif; }
.ws-dialog input::placeholder { color: #8f97b1; }
.ws-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.ws-form-note { font-size: 12px; line-height: 1.7; color: #a0a8bf; margin: 20px 0; }
.ws-dialog form > .ws-primary { width: 100%; }.ws-topic-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }.ws-topic-chips button { border: 1px solid #484762; border-radius: 20px; background: #302e48; color: #d2c8f0; padding: 5px 10px; font-size: 11px; }
.ws-dialog #search-results { max-height: 220px; overflow-y: auto; margin-top: 12px; font-size: 13px; }.ws-dialog #search-results ul { list-style: none; margin: 0; padding: 0; }.ws-dialog #search-results li { border-top: 1px solid #363d51; }.ws-dialog #search-results a { display: block; padding: 14px 4px; color: #d9f588; }.ws-dialog #search-results p { color: #a6aec3; font-size: 12px; }
.ws-dialog .word-search-request-error { background: #402c3b; color: #ffcad9; border: 1px solid #795066; border-radius: 12px; font-size: 13px; padding: 14px; margin-bottom: 18px; }
.ws-help-list { list-style: decimal-leading-zero; padding-left: 27px; color: #abb2c8; font-size: 13px; }.ws-help-list li { padding: 8px 0 14px 9px; }.ws-help-list b { display: block; margin-bottom: 5px; color: #e5e7f0; font-size: 15px; }
#ws-print .modal-body > p { color: #a6aec4; font-size: 13px; }#ws-print-buttons { display: grid; gap: 10px; margin-top: 22px; }#ws-print-buttons button { background: #30374c; color: #dedfec; border: 1px solid #4a536d; border-radius: 12px; padding: 15px; }
.ws-win-body { text-align: center; }.ws-win-art { display: grid; place-items: center; margin: 5px auto 25px; height: 100px; width: 100px; border-radius: 30px; background: #d9f588; color: #354332; font-size: 58px; transform: rotate(-8deg); box-shadow: 15px 10px 0 #c7baf3; }
.ws-win-body h2 { font-size: 34px; }.ws-win-body > p { color: #a6aec4; margin: 12px 0 24px; font-size: 13px; }.ws-win-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #3a4257; border-radius: 14px; margin-bottom: 24px; padding: 16px 0; }.ws-win-stats > div + div { border-left: 1px solid #3a4257; }.ws-win-stats strong { display: block; font-size: 23px; font-weight: 550; color: #f4f3ec; font-variant-numeric: tabular-nums; }.ws-win-stats span { display: block; margin-top: 5px; font-size: 9px; letter-spacing: 1.4px; color: #abb3c7; }.ws-win-links { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }.ws-win-links a { color: #c7baf3; font-size: 12px; }
.ws-confetti { position: fixed; top: -20px; pointer-events: none; z-index: 1065; width: 7px; height: 13px; animation: ws-confetti 2.7s ease-in forwards; }
.ws-toast { position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%); z-index: 1080; background: #d9f588; color: #263321; border-radius: 30px; padding: 12px 24px; font: 600 13px ui-sans-serif, system-ui; box-shadow: 0 8px 35px #080c2840; pointer-events: none; white-space: nowrap; animation: ws-toast 2s ease forwards; }
@keyframes ws-confetti { to { transform: translate3d(var(--drift), 105vh, 0) rotate(650deg); opacity: 0; } }
@keyframes ws-toast { 0% { opacity: 0; translate: 0 12px; } 15%,75% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -8px; } }
.ws-sr-only, .ws-skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }.ws-skip-link:focus { display: block; background: #d9f588; color: #171b2c; padding: 16px; }
/* History is usable inside a theme without imposing the app shell on other pages. */
.occ-word-search-history { width: 100%; border-collapse: collapse; }.occ-word-search-history th, .occ-word-search-history td { padding: 12px; border-bottom: 1px solid #ddd; text-align: left; }.occ-word-search-history .delete-game { border-radius: 8px; padding: 8px 12px; border: 1px solid #bbb; background: transparent; }
@media (min-width: 1200px) { .ws-app { max-width: 1080px; }.ws-play-layout { grid-template-columns: minmax(0, 1fr) 302px; gap: 30px; } }
@media (max-width: 850px) {
 .ws-app { padding: 0 24px; }.ws-play-layout { gap: 18px; grid-template-columns: minmax(0, 1fr) 240px; }.ws-word-panel { padding: 20px 16px; }.ws-word-panel h2 { font-size: 18px; }.ws-progress-ring { width: 44px; height: 44px; }.ws-progress-ring span { width: 36px; height: 36px; font-size: 9px; }.ws-stats { gap: 20px; padding: 0 16px; }.ws-tool { gap: 5px; }.ws-tool span { font-size: 10px; }
}
@media (max-width: 680px) {
 .ws-app { padding: 0 20px; border-radius: 0; }.ws-topbar { height: 82px; }.ws-brand { font-size: 20px; gap: 9px; }.ws-brand-mark { width: 38px; height: 38px; font-size: 28px; border-radius: 12px; }.ws-brand small { font-size: 6px; letter-spacing: 1.5px; }.ws-top-actions { gap: 6px; }.ws-icon-button, .ws-avatar { width: 34px; height: 34px; font-size: 16px; }.ws-avatar { margin-left: 1px; }.ws-avatar svg { width: 18px; }.ws-heading { padding: 25px 0 22px; display: block; position: relative; }.ws-heading h1 { font-size: 28px; letter-spacing: -.9px; }.ws-heading .ws-eyebrow { font-size: 8px; letter-spacing: 1.6px; margin-bottom: 10px; }.ws-subtitle { font-size: 12px; margin-top: 9px; }.ws-level { display: inline-flex; font-size: 10px; padding: 5px 10px; margin-top: 14px; }.ws-play-layout { display: flex; flex-direction: column; gap: 22px; }.ws-board-column, .ws-word-panel { width: 100%; }.ws-stats { height: 56px; border-radius: 17px 17px 0 0; gap: 28px; padding: 0 16px; }.ws-stats > div { gap: 8px; }.ws-stat-label { font-size: 8px; }.ws-stats strong { font-size: 18px; }.ws-pause-button { width: 32px; height: 32px; }.ws-board-wrap { padding: 9px; border-radius: 0 0 17px 17px; }.ws-board-caption { height: 38px; font-size: 10px; }.ws-tools { gap: 7px; }.ws-tool { min-height: 45px; padding: 10px 6px; gap: 6px; }.ws-tool span { font-size: 10px; }.ws-tool svg { width: 15px; height: 15px; }#ws-hints-left { width: 16px; height: 16px; font-size: 9px; }.ws-word-panel { padding: 19px 18px 16px; border-radius: 17px; }.ws-word-panel h2 { font-size: 18px; max-width: none; }.ws-word-panel .ws-eyebrow { font-size: 8px; margin-bottom: 6px; }.ws-progress-copy { margin-top: 16px; font-size: 10px; }.ws-progress-track { margin-bottom: 15px; }.ws-word-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }.ws-word-list li { font-size: 10px; padding: 9px 8px; letter-spacing: .6px; }.ws-word-tip { margin: 15px 0 0; font-size: 10px; }.ws-discovery-card { display: none; }.ws-words-first { order: -1; }.ws-bottom-nav { margin-top: 24px; padding: 6px 12px; gap: 25px; width: 100%; border-radius: 17px; position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; box-shadow: 0 8px 30px #080b2080; }.ws-bottom-nav > * { flex-direction: column; gap: 2px; font-size: 9px; padding: 7px 0; }.ws-bottom-nav > * > span { font-size: 21px; line-height: 1.2; }.ws-footer { padding: 22px 2px 28px; font-size: 9px; }.ws-footer > span:last-child { font-size: 7px; }.ws-dialog .modal-dialog { margin: 12px; }.ws-dialog .modal-content { padding: 5px; border-radius: 22px; }.ws-dialog .modal-header { padding: 20px 18px 6px; }.ws-dialog .modal-body { padding: 12px 18px 24px; }.ws-dialog h2 { font-size: 24px; }.ws-dialog input, .ws-dialog select { font-size: 16px; }.ws-form-row { gap: 12px; }.ws-win-body h2 { font-size: 30px; }
}
@media (max-width: 360px) { .ws-app { padding: 0 12px; }.ws-top-actions { gap: 4px; }.ws-brand small { display: none; }.ws-heading h1 { font-size: 25px; }.ws-tool { gap: 4px; }.ws-tool span { font-size: 9px; }.ws-bottom-nav { gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .ws-app *, .ws-dialog *, .ws-toast, .ws-confetti { animation: none !important; transition: none !important; scroll-behavior: auto !important; }.ws-confetti { display: none; } }

.ws-game.dark .ws-board-wrap { background: #272e43; }
.ws-dialog [hidden] { display: none !important; }
/* Keep navigation in the document flow: it must never intercept board gestures. */
@media (max-width: 680px) {
 .ws-bottom-nav { position: relative; bottom: auto; }
 .ws-topbar { height: 70px; }
 .ws-heading { padding: 20px 0; }
 .ws-heading .ws-eyebrow { font-size: 7px; margin-bottom: 8px; }
 .ws-heading h1 { font-size: 27px; }
 .ws-heading .ws-subtitle { display: none; }
 .ws-level { margin-top: 10px; }
 .ws-word-panel h2 { font-size: 17px; }
}
@media (min-width: 851px) {
 .ws-app { max-width: 1000px; }
 .ws-topbar { height: 86px; }
 .ws-heading { padding: 28px 0 24px; }
 .ws-play-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 26px; }
 .ws-word-panel { padding: 23px 20px; }
}