:root{--bg:#14172B;--panel:#1E2240;--panel2:#262B55;--chalk:#F2EFE6;--gold:#F5C04A;--cyan:#4DC3D9;--coral:#FF7A66;--violet:#9B7BFF;--mute:#8A90B5;--line:#2D3262;--ok:#5BC98A;--bad:#FF6B6B;--cell:#1b1f3a;--sel:rgba(245,192,74,.28)}
:root[data-theme=light]{--bg:#F4F1E8;--panel:#FFFFFF;--panel2:#ECE8DC;--chalk:#1B1F3A;--gold:#C98A00;--cyan:#0C8AA3;--coral:#D9533F;--violet:#6A4FD1;--mute:#5E6486;--line:#D8D3C2;--cell:#fff;--sel:rgba(201,138,0,.25)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--chalk);font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
#app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
button{font:inherit;color:inherit;cursor:pointer}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px}
.top h1{font:800 22px Georgia,serif;margin:0}
.chip{background:var(--gold);color:#1a1630;border-radius:99px;padding:3px 10px;font-size:13px;font-weight:700}
main{flex:1;padding:6px 16px 90px}
.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}
.tabs div{display:flex;width:100%;max-width:560px}.tabs button{flex:1;border:0;background:none;padding:10px 4px 8px;color:var(--mute);font-size:12px}
.tabs button.on{color:var(--gold);font-weight:700}.tabs b{display:block;font-size:20px;line-height:1.1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;margin:10px 0}
.card.game{display:flex;align-items:center;gap:12px;border-left:5px solid var(--gold);width:100%;text-align:left}
.card.game.sk{border-left-color:var(--cyan)}.card.game.kk{border-left-color:var(--coral)}
.card.game .t{flex:1}.card.game .t small{display:block;color:var(--mute)}
.btn{background:var(--gold);color:#1a1630;border:0;border-radius:12px;padding:11px 16px;font-weight:700}
.btn.sec{background:var(--panel2);color:var(--chalk)}.btn.sm{padding:7px 12px;font-size:14px}.btn:disabled{opacity:.45}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.seg button{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:6px 12px;font-size:14px;color:var(--mute)}
.seg button.on{background:var(--gold);color:#1a1630;border-color:var(--gold);font-weight:700}
.list button.row{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 14px;margin:6px 0;text-align:left}
.row .sub{color:var(--mute);font-size:13px}.ok{color:var(--ok)}.lock{opacity:.6}
.dots{display:flex;gap:5px;margin-top:8px}.dots i{width:18px;height:18px;border-radius:5px;background:var(--panel2)}.dots i.on{background:var(--gold)}
h2{font:700 20px Georgia,serif;margin:16px 0 4px}h3{margin:14px 0 4px;font-size:16px}
.muted{color:var(--mute);font-size:14px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat b{display:block;font:700 26px Georgia,serif;color:var(--gold)}
/* play screen */
.play{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding:0 12px 14px}
.bar{display:flex;align-items:center;justify-content:space-between;padding:10px 4px}.bar .ttl{text-align:center;font-weight:700}.bar .ttl small{display:block;color:var(--mute);font-weight:400}
.iconbtn{background:var(--panel);border:1px solid var(--line);border-radius:10px;width:40px;height:40px;font-size:18px}
.timer{font-variant-numeric:tabular-nums;font-weight:700}
.boardwrap{display:flex;justify-content:center;margin:6px 0 10px}
.board{display:grid;gap:0;--sz:min(94vw,520px);width:var(--sz);height:var(--sz);border:3px solid #0b0d1c;border-radius:8px;overflow:hidden;user-select:none;touch-action:manipulation}
.cell{position:relative;border:0;padding:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;background:var(--cell);outline:0}
.board.sb .cell{font-size:calc(var(--sz)/var(--n)*.5)}
.cell .reg{position:absolute;top:1px;left:3px;font-size:9px;opacity:.75;font-weight:600}
.cell.sel{box-shadow:inset 0 0 0 3px var(--gold);z-index:2}
.cell.hl{box-shadow:inset 0 0 0 3px var(--violet);z-index:1}.cell.hl2{box-shadow:inset 0 0 0 3px var(--ok);z-index:1}
.cell.err{background-image:linear-gradient(rgba(255,60,60,.55),rgba(255,60,60,.55))}
.cell.star{color:var(--gold)}.cell.cross{color:rgba(255,255,255,.65);font-weight:400}
.cell:focus-visible{box-shadow:inset 0 0 0 3px var(--cyan);z-index:3}
.board.sk,.board.kk{background:var(--panel)}
.board.sk .cell.in,.board.kk .cell.w{background:var(--cell);color:var(--chalk);font-size:calc(var(--sz)/var(--n)*.5);border:1px solid var(--line)}
.board.sk .cell.in.given,.board.kk .cell.w.given{background:var(--panel2);color:var(--gold)}
.board.sk .cell.in.sel,.board.kk .cell.w.sel{background:var(--sel)}
.clue{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--cyan);font-size:calc(var(--sz)/var(--n)*.38)}
.clue.met{color:var(--ok)}.clue.bad{color:var(--bad)}
.notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);font-size:calc(var(--sz)/var(--n)*.2);font-weight:500;color:var(--mute);line-height:1;text-align:center}
.cell.kb{background:#0f1124;border:1px solid var(--line)}
.cell.kc{background:linear-gradient(to top right,#0f1124 calc(50% - 1px),var(--line) 50%,#0f1124 calc(50% + 1px));color:var(--coral);font-weight:700;font-size:calc(var(--sz)/var(--n)*.27)}
.cell.kc .a{position:absolute;top:2px;right:3px}.cell.kc .d{position:absolute;bottom:2px;left:3px}
.tools{display:flex;gap:6px;justify-content:center;margin:2px 0 8px;flex-wrap:wrap}
.tools button{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:14px}
.tools button.on{background:var(--gold);color:#1a1630;border-color:var(--gold)}
.pad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:520px;width:94vw;margin:0 auto}
.pad button{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 0;font-size:20px;font-weight:700}
.pad button:disabled{opacity:.3}
.hint{background:var(--panel2);border:1px solid var(--violet);border-radius:12px;padding:10px 12px;margin:6px auto;max-width:520px;width:94vw;font-size:14px}
.hint b{color:var(--violet)}
.msg{text-align:center;color:var(--mute);min-height:22px;font-size:14px;margin:2px 0}
.modal{position:fixed;inset:0;background:rgba(5,6,16,.7);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet{background:var(--panel);border-radius:22px 22px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));width:100%;max-width:560px;max-height:90vh;overflow:auto}
.sheet h2{margin-top:0}.share{font:20px/1.25 system-ui;background:var(--bg);border-radius:12px;padding:10px 12px;white-space:pre-wrap;margin:10px 0}
.mini{display:inline-grid;gap:0;border:2px solid #0b0d1c;border-radius:4px;overflow:hidden;margin:6px 0}.mini i{display:block;width:22px;height:22px;position:relative;text-align:center;font:700 13px/22px system-ui;color:#fff}
.mini i.hlc{box-shadow:inset 0 0 0 2px var(--violet)}.mini i.st{color:var(--gold)}.mini i.el{color:#ffffffb0}
.toggle{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.toggle input{width:22px;height:22px;accent-color:var(--gold)}
table.combo{border-collapse:collapse;width:100%;font-size:14px}table.combo td,table.combo th{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left}
.fade{animation:fade .25s}@keyframes fade{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.win-stars{font-size:40px;text-align:center}