:root{--bg:var(--tg-theme-bg-color,#fff);--text:var(--tg-theme-text-color,#1b1f23);--hint:var(--tg-theme-hint-color,#8a939c);--accent:var(--tg-theme-button-color,#2f80ed);--accent-text:var(--tg-theme-button-text-color,#fff);--sec:var(--tg-theme-secondary-bg-color,#f1f3f5);--empty:#5c6674;--line:#4a545f;--line2:#1f252b;--xmark:#d3d9de;--err:#ff1744}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.3 -apple-system,system-ui,Roboto,sans-serif;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
.screen{display:none;padding:12px 8px 28px}
.screen.on{display:block}
h1{font-size:20px;margin:4px 4px 2px}
.sub{color:var(--hint);margin:0 4px 12px}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px}
.card{aspect-ratio:1;border:0;border-radius:12px;background:var(--sec);position:relative;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.card .num{font-size:18px;font-weight:600}
.card .dots{display:flex;gap:3px}
.card .dots i{width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.card.started::after{content:'';position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.card canvas{width:100%;height:100%;image-rendering:pixelated;border-radius:6px}
.top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.top .title{flex:1;font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon{border:0;background:var(--sec);width:36px;height:36px;border-radius:10px;font-size:24px;line-height:1}
.timer{font-variant-numeric:tabular-nums;color:var(--hint)}
#board{display:grid;grid-template-columns:repeat(var(--cols),var(--cell));grid-template-rows:repeat(var(--rows),var(--cell));justify-content:center;touch-action:none}
.cell{background-color:var(--empty);border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.cell.c0{border-left:2px solid var(--line2)}
.cell.r0{border-top:2px solid var(--line2)}
.cell.c4,.cell.c9{border-right:2px solid var(--line2)}
.cell.r4,.cell.r9{border-bottom:2px solid var(--line2)}
.cell.x{background-image:linear-gradient(45deg,transparent 44%,var(--xmark) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--xmark) 44% 56%,transparent 56%);background-size:60% 60%;background-position:center;background-repeat:no-repeat}
.clue{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:calc(var(--cell)*.52);border-radius:4px;margin:1px;transition:opacity .2s}
.clue.done{opacity:.3;text-decoration:line-through}
.clue.zero{color:var(--hint);font-weight:400}
.clue.err{box-shadow:0 0 0 3px var(--err)!important;opacity:1;text-decoration:none;animation:errpulse .9s ease-in-out infinite alternate}
.clue.zero.err{color:var(--err);font-weight:700}
@keyframes errpulse{from{box-shadow:0 0 0 2px var(--err)}to{box-shadow:0 0 0 4px var(--err)}}
#board.won .cell{border-color:transparent}
#board.won .cell.x{background-image:none}
#tools{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:16px 0 12px}
.tool{width:46px;height:46px;border-radius:12px;border:3px solid transparent;box-shadow:0 0 0 1px rgba(0,0,0,.15) inset;font-size:22px;font-weight:700;background:var(--sec)}
.tool.on{border-color:var(--text);transform:scale(1.08)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
.actions button,.row button{border:0;background:var(--sec);padding:10px 14px;border-radius:10px}
.switch{display:flex;align-items:center;gap:6px;color:var(--hint)}
.switch input{width:18px;height:18px;accent-color:var(--accent)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
.modal[hidden]{display:none}
.sheet{background:var(--bg);border-radius:18px;padding:20px;text-align:center;width:min(320px,100%)}
#winPic{width:180px;height:180px;image-rendering:pixelated;border-radius:8px}
.winName{font-size:20px;font-weight:700;margin-top:10px}
.winTime{color:var(--hint);margin:4px 0 16px}
.row{display:flex;gap:10px;justify-content:center}
.row .primary{background:var(--accent);color:var(--accent-text)}
#fatal{margin:12px 8px;padding:12px;border-radius:10px;background:#ffebee;color:#b71c1c;font-size:14px;word-break:break-word}
#fatal[hidden]{display:none}