:root{--ink:#12161c;--paper:#fbfcfd;--line:#2b3440;--shade:#fde9c8;--good:#1a7f4b;--bad:#c0392b;--sel:#cfe3ff;--word:#e8f1ff;--muted:#5b6675}
*{box-sizing:border-box}
body{margin:0;padding:24px 16px;background:var(--paper);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
main{max-width:860px;margin:0 auto}
h1{font-size:1.5rem;margin:0 0 4px}
.sub{color:var(--muted);margin:0 0 20px;font-size:.95rem}
.wrap{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start}
table.grid{border-collapse:collapse;border:3px solid var(--line);touch-action:manipulation}
table.grid td{width:60px;height:60px;border:1px solid var(--line);position:relative;text-align:center;
  font-size:26px;font-weight:600;text-transform:uppercase;cursor:pointer;background:#fff;padding:0}
table.grid td.block{background:var(--line);cursor:default}
table.grid td.shade{background:var(--shade)}
table.grid td.wordsel{background:var(--word)}
table.grid td.shade.wordsel{background:#f6e2bd}
table.grid td.sel{background:var(--sel)!important;outline:2px solid #2b6cb0;outline-offset:-2px}
table.grid td .num{position:absolute;top:2px;left:4px;font-size:11px;font-weight:600;color:var(--muted)}
table.grid td .ch{display:flex;align-items:center;justify-content:center;height:100%}
td.ok .ch{color:var(--good)}
td.bad .ch{color:var(--bad)}
.clues{flex:1;min-width:260px}
.clues h2{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.clues ol{list-style:none;margin:0 0 20px;padding:0}
.clues li{padding:5px 8px;border-radius:5px;cursor:pointer;display:flex;gap:8px;font-size:.95rem}
.clues li:hover{background:#eef2f7}
.clues li.on{background:var(--sel);font-weight:600}
.clues li b{min-width:20px;text-align:right;color:var(--muted)}
.bar{margin:18px 0 8px;display:flex;gap:8px;flex-wrap:wrap}
button{font:inherit;padding:8px 16px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer}
button:hover{background:#eef2f7}
#status{margin:6px 0 0;min-height:1.5em;font-size:.95rem}
.reveal{margin-top:22px;padding:12px 16px;border:1px solid #e3c184;background:#fffaf0;border-radius:8px;font-size:.95rem}
.reveal b{letter-spacing:.18em}
@media(max-width:720px){.wrap{gap:20px}table.grid td{width:56px;height:56px;font-size:24px}}
@media(max-width:480px){body{padding:16px 10px}table.grid td{width:48px;height:48px;font-size:21px}}