:root{--bg:#faf7f2;--ink:#16181d;--line:#1b1e24;--fill:#fff;--sel:#ffe08a;--word:#d7ecff;
--ok:#1a7f4b;--bad:#c0392b;--muted:#6b7280}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
font:16px/1.5 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:860px;margin:0 auto;padding:24px 18px 48px}
h1{font-size:1.5rem;margin:0 0 2px;letter-spacing:-.01em}
.sub{color:var(--muted);margin:0 0 18px;font-size:.94rem}
.cols{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.gridwrap{flex:0 0 auto}
table.grid{border-collapse:collapse;border:3px solid var(--line)}
table.grid td{width:60px;height:60px;border:1px solid var(--line);position:relative;padding:0;
text-align:center;vertical-align:middle;background:var(--fill);font-size:1.6rem;font-weight:600;
text-transform:uppercase;cursor:pointer;user-select:none}
table.grid td.block{background:var(--line);cursor:default}
table.grid td.word{background:var(--word)}
table.grid td.sel{background:var(--sel)}
table.grid td .n{position:absolute;top:1px;left:3px;font-size:.62rem;font-weight:700;color:var(--muted)}
table.grid td.ok{color:var(--ok)}
table.grid td.bad{color:var(--bad)}
.clues{flex:1 1 260px;min-width:240px;display:flex;gap:28px;flex-wrap:wrap}
.clues section{flex:1 1 200px}
.clues h2{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
margin:0 0 8px;border-bottom:1px solid #ddd8cf;padding-bottom:4px}
.clues ol{list-style:none;margin:0;padding:0}
.clues li{padding:4px 6px;border-radius:5px;cursor:pointer;font-size:.93rem}
.clues li b{display:inline-block;min-width:1.5em;color:var(--muted)}
.clues li.active{background:var(--sel)}
.bar{display:flex;gap:8px;margin:16px 0 0;flex-wrap:wrap}
button{font:inherit;padding:7px 14px;border:1px solid var(--line);border-radius:6px;
background:#fff;cursor:pointer}
button:hover{background:#f0ece4}
button:focus-visible,table.grid td:focus-visible{outline:3px solid #2563eb;outline-offset:1px}
.status{margin-top:10px;font-size:.92rem;color:var(--muted);min-height:1.4em}
.note{margin-top:26px;padding-top:14px;border-top:1px solid #ddd8cf;font-size:.88rem;color:var(--muted)}
@media (max-width:720px){.cols{flex-direction:column}table.grid td{width:54px;height:54px;font-size:1.4rem}}
@media (max-width:480px){table.grid td{width:46px;height:46px;font-size:1.2rem}.wrap{padding:16px 12px 40px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}