*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}#app{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:16px}.game{width:min(96vw,520px);display:flex;flex-direction:column;gap:14px}.crumb{font-size:14px}.crumb a{color:var(--accent);text-decoration:none;font-weight:700}.crumb a:hover{text-decoration:underline}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.title{font-size:clamp(26px,7.5vw,44px);font-weight:800;line-height:1;letter-spacing:-1px}.scores{display:flex;gap:8px}.score-box{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 10px;text-align:center;min-width:54px;box-shadow:0 1px #00000008}.score-box .label{font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.7;font-weight:700}.score-box .value{font-size:20px;font-weight:800;line-height:1.1}.controls{display:flex;align-items:center;gap:10px}.how{font-size:13px;opacity:.85;flex:1}.how b{font-weight:700}.options{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.options label{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}.options select{font:inherit;font-size:14px;font-weight:700;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 8px;cursor:pointer}.btn{background:var(--accent);color:var(--accent-text);border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;margin-left:auto;transition:filter .12s ease,transform .12s ease}.btn:hover{filter:brightness(1.05)}.btn:active{filter:brightness(.95);transform:translateY(1px)}.board{--ws-page-a: #f8f2e4;--ws-page-b: #f0e6d2;--ws-mat-a: #e9dec6;--ws-mat-b: #ded0b3;--ws-ink: #3a3126;--ws-line: rgba(120, 96, 60, .16);--ws-line-strong: rgba(120, 96, 60, .28);--ws-sel-h: 42;--ws-sel-s: 92%;--ws-sel-l: 54%;--ws-sel-a: .55;--wc-a: .42;--wc-edge: .3;--ws-anchor: hsl(14, 82%, 60%);position:relative;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(150deg,var(--ws-mat-a),var(--ws-mat-b));border:1px solid var(--ws-line-strong);box-shadow:0 1px #ffffff59 inset,0 12px 30px -14px #281e0f73}.grid{--cell: 32px;--n: 10;position:relative;display:grid;grid-template-columns:repeat(var(--n),var(--cell));grid-auto-rows:var(--cell);gap:0;justify-content:center;padding:6px;border-radius:10px;touch-action:none;user-select:none;-webkit-user-select:none;background:radial-gradient(120% 90% at 50% -10%,rgba(255,255,255,.5),transparent 60%),linear-gradient(160deg,var(--ws-page-a),var(--ws-page-b));box-shadow:0 0 0 1px var(--ws-line) inset,0 6px 16px -10px #281e0f80}.cell{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:var(--cell);height:var(--cell);font-size:calc(var(--cell) * .5);font-weight:700;line-height:1;color:var(--ws-ink);background:transparent;cursor:pointer;text-transform:uppercase;box-shadow:inset 0 0 0 .75px var(--ws-line);transition:color .16s ease}.cell:before{content:"";position:absolute;inset:1px;z-index:-1;border-radius:32%;background:transparent;box-shadow:none;transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.cell.sel:before{background:hsl(var(--ws-sel-h) var(--ws-sel-s) var(--ws-sel-l) / var(--ws-sel-a));box-shadow:inset 0 0 0 1.5px hsl(var(--ws-sel-h) var(--ws-sel-s) var(--ws-sel-l) / .85);animation:wsSelPulse 1.1s ease-in-out infinite}.cell.sel{color:var(--ws-ink)}.cell.anchor{box-shadow:inset 0 0 0 .75px var(--ws-line),inset 0 0 0 3px var(--ws-anchor)}.cell.found:before{background:hsl(var(--h) var(--s) var(--l) / var(--wc-a));box-shadow:inset 0 0 0 1.5px hsl(var(--h) var(--s) var(--l) / calc(var(--wc-a) + var(--wc-edge)));animation:wsFoundPop .36s cubic-bezier(.2,1.4,.4,1)}.cell.sel.found:before{background:hsl(var(--ws-sel-h) var(--ws-sel-s) var(--ws-sel-l) / var(--ws-sel-a));box-shadow:inset 0 0 0 1.5px hsl(var(--ws-sel-h) var(--ws-sel-s) var(--ws-sel-l) / .85)}.cell[data-wc="0"]{--h: 350;--s: 74%;--l: 58%}.cell[data-wc="1"]{--h: 38;--s: 90%;--l: 52%}.cell[data-wc="2"]{--h: 140;--s: 55%;--l: 46%}.cell[data-wc="3"]{--h: 182;--s: 58%;--l: 42%}.cell[data-wc="4"]{--h: 212;--s: 78%;--l: 56%}.cell[data-wc="5"]{--h: 264;--s: 58%;--l: 62%}.cell[data-wc="6"]{--h: 322;--s: 68%;--l: 60%}.cell[data-wc="7"]{--h: 20;--s: 85%;--l: 56%}.cell[data-wc="8"]{--h: 162;--s: 56%;--l: 44%}.cell[data-wc="9"]{--h: 196;--s: 78%;--l: 50%}.wordlist{display:flex;flex-wrap:wrap;gap:7px 8px;padding:4px 2px 2px}.word{--h: 30;--s: 20%;--l: 40%;position:relative;font-size:13px;font-weight:700;letter-spacing:.5px;color:var(--ws-ink);background:color-mix(in srgb,var(--ws-page-a) 60%,transparent);border:1px solid var(--ws-line);border-radius:999px;padding:3px 10px;transition:color .16s ease,background .2s ease,border-color .2s ease}.word.done{color:hsl(var(--h) var(--s) calc(var(--l) - 6%));background:hsl(var(--h) var(--s) var(--l) / .16);border-color:hsl(var(--h) var(--s) var(--l) / .5);text-decoration:line-through;text-decoration-color:hsl(var(--h) var(--s) var(--l) / .75);text-decoration-thickness:2px}.word.done:before{content:"✓ ";text-decoration:none;font-weight:800}.word:nth-child(10n+1){--h: 350;--s: 74%;--l: 58%}.word:nth-child(10n+2){--h: 38;--s: 90%;--l: 52%}.word:nth-child(10n+3){--h: 140;--s: 55%;--l: 46%}.word:nth-child(10n+4){--h: 182;--s: 58%;--l: 42%}.word:nth-child(10n+5){--h: 212;--s: 78%;--l: 56%}.word:nth-child(10n+6){--h: 264;--s: 58%;--l: 62%}.word:nth-child(10n+7){--h: 322;--s: 68%;--l: 60%}.word:nth-child(10n+8){--h: 20;--s: 85%;--l: 56%}.word:nth-child(10n+9){--h: 162;--s: 56%;--l: 44%}.word:nth-child(10n){--h: 196;--s: 78%;--l: 50%}.overlay{position:absolute;inset:0;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px;background:var(--overlay-bg);color:var(--text);z-index:20;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .22s ease}.overlay.show{opacity:1;pointer-events:auto}.overlay:before{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 48%,rgba(255,226,150,.55) 52%,transparent 62%);transform:translate(-120%);pointer-events:none}.overlay.show:before{animation:wsShimmer 2.4s ease-in-out .15s infinite}.overlay .msg{position:relative;font-size:clamp(28px,9vw,46px);font-weight:800;animation:wsPopIn .46s cubic-bezier(.2,1.5,.4,1) both}.overlay .sub{position:relative;font-size:16px;font-weight:700;opacity:.85}.overlay .btn{position:relative;margin-left:0}@keyframes wsSelPulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes wsFoundPop{0%{transform:scale(.55);opacity:.2}60%{transform:scale(1.08);opacity:1}to{transform:scale(1)}}@keyframes wsShimmer{0%{transform:translate(-120%)}60%{transform:translate(120%)}to{transform:translate(120%)}}@keyframes wsPopIn{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .board{--ws-page-a: #262d38;--ws-page-b: #1d232c;--ws-mat-a: #2c333e;--ws-mat-b: #232932;--ws-ink: #e9eef6;--ws-line: rgba(255, 255, 255, .09);--ws-line-strong: rgba(0, 0, 0, .35);--ws-sel-a: .4;--wc-a: .5;--wc-edge: .28;--ws-anchor: hsl(14, 88%, 64%)}}:root[data-theme=dark] .board{--ws-page-a: #262d38;--ws-page-b: #1d232c;--ws-mat-a: #2c333e;--ws-mat-b: #232932;--ws-ink: #e9eef6;--ws-line: rgba(255, 255, 255, .09);--ws-line-strong: rgba(0, 0, 0, .35);--ws-sel-a: .4;--wc-a: .5;--wc-edge: .28;--ws-anchor: hsl(14, 88%, 64%)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .word.done{color:hsl(var(--h) var(--s) calc(var(--l) + 16%))}}:root[data-theme=dark] .word.done{color:hsl(var(--h) var(--s) calc(var(--l) + 16%))}@media(prefers-reduced-motion:reduce){.cell.sel:before,.cell.found:before,.overlay.show:before,.overlay .msg{animation:none!important}}@media(max-width:420px){.how{display:none}}