:root{--bg:#f6f6f3;--fg:#1d1d1f;--muted:#6b6b70;--line:#cfcfd2;--thick:#3a3a3c;--cell:#fff;--sel:#d3e3fd;--same:#eaf1fd;--given:#111113;--user:#1a6cf0;--err:#c62828;--errbg:#fde7e7;--btn:#e9e9ec;--accent:#2457c5;--onaccent:#fff;--dlg:#f6f6f3;--note:#3a3a40;--notew:500;--hk:#c9f0d3;--hkfg:#178a3e;--elim:#e0457b;--userw:400}
:root[data-sudoku-theme=dark]{--bg:#000;--fg:#e8e8ea;--muted:#8e8e93;--line:#2c2c2f;--thick:#7c7c82;--cell:#0e0e10;--sel:#2b4f8c;--same:#1d355c;--given:#f2f2f5;--user:#5aa2ff;--err:#ff6b6b;--errbg:#3a1414;--btn:#1c1c1e;--accent:#8fb4ff;--onaccent:#000;--dlg:#1a1a1c;--note:#8a8a91;--notew:400;--hk:#1d4a2b;--hkfg:#6fe39a}
@media (prefers-color-scheme:dark){:root:not([data-sudoku-theme=light]){--bg:#000;--fg:#e8e8ea;--muted:#8e8e93;--line:#2c2c2f;--thick:#7c7c82;--cell:#0e0e10;--sel:#2b4f8c;--same:#1d355c;--given:#f2f2f5;--user:#5aa2ff;--err:#ff6b6b;--errbg:#3a1414;--btn:#1c1c1e;--accent:#8fb4ff;--onaccent:#000;--dlg:#1a1a1c;--note:#8a8a91;--notew:400;--hk:#1d4a2b;--hkfg:#6fe39a}}
/* Valbar färg på egna siffror (ljust / mörkt) */
:root[data-own=green]{--user:#1b8a3a}:root[data-own=purple]{--user:#7b3fe0}:root[data-own=orange]{--user:#d9680b}
:root[data-sudoku-theme=dark][data-own=green]{--user:#58d27c}:root[data-sudoku-theme=dark][data-own=purple]{--user:#b494ff}:root[data-sudoku-theme=dark][data-own=orange]{--user:#ffa04d}
@media (prefers-color-scheme:dark){:root:not([data-sudoku-theme=light])[data-own=green]{--user:#58d27c}:root:not([data-sudoku-theme=light])[data-own=purple]{--user:#b494ff}:root:not([data-sudoku-theme=light])[data-own=orange]{--user:#ffa04d}}
/* Hög kontrast */
:root[data-contrast=high]{--line:#555;--thick:#000;--note:#000;--notew:600;--muted:#333;--userw:600}
:root[data-sudoku-theme=dark][data-contrast=high]{--line:#aaa;--thick:#fff;--note:#fff;--muted:#ddd}
@media (prefers-color-scheme:dark){:root:not([data-sudoku-theme=light])[data-contrast=high]{--line:#aaa;--thick:#fff;--note:#fff;--muted:#ddd}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
body{touch-action:manipulation;-webkit-user-select:none;user-select:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button{font-family:inherit}
.app{max-width:500px;margin:0 auto;padding:10px 10px 24px;display:flex;flex-direction:column;gap:12px}
header{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px;min-height:36px}
.stats{display:flex;gap:14px;color:var(--muted)}
.stats b{color:var(--fg);font-weight:600}
.stats .lvl{color:var(--fg);font-weight:600}
.iconbtn{background:none;border:0;color:var(--fg);font-size:22px;line-height:1;padding:6px 8px;border-radius:8px}
.board{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);width:100%;aspect-ratio:1;border:2px solid var(--thick);background:var(--cell)}
.c{position:relative;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:clamp(20px,6.4vw,30px);color:var(--user);font-weight:var(--userw);background:var(--cell);min-width:0;min-height:0}
.c.br{border-right:2px solid var(--thick)}.c.bb{border-bottom:2px solid var(--thick)}
.c.c8{border-right:0}.c.r8{border-bottom:0}
.c.g{color:var(--given);font-weight:650}
.c.same{background:var(--same)}
.c.sel{background:var(--sel)}
.c.err{color:var(--err)}
.c.err:not(.sel){background:var(--errbg)}
.cb[data-cb=on] .c.err::after,:root[data-cb=on] .c.err::after{content:"\2715";position:absolute;top:1px;right:3px;font-size:10px;line-height:1}
.notes{position:absolute;inset:1px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:clamp(10px,3.1vw,14px);font-weight:var(--notew);color:var(--note);line-height:1;pointer-events:none}
.notes span{display:flex;align-items:center;justify-content:center;border-radius:4px}
.notes span.hl{background:var(--accent);color:var(--onaccent);font-weight:700}
/* Våg när något blir klart: 0,9 s per ruta, fördröjning sätts per ruta via --d */
@keyframes wave{0%,100%{transform:scale(1);background:var(--cell)}45%{transform:scale(.96);background:var(--accent);color:var(--onaccent)}}
.c.wave{animation:wave .9s ease-in-out var(--d,0ms) 1 both;z-index:1}
.seg{display:flex;background:var(--btn);border:1px solid var(--line);border-radius:9px;padding:2px}
.seg button{flex:1;border:0;background:none;color:var(--fg);font-size:14px;padding:6px 10px;border-radius:7px}
.seg button.on{background:var(--accent);color:var(--onaccent);font-weight:600}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tool{background:var(--btn);border:0;border-radius:12px;padding:9px 4px;color:var(--fg);font-size:14px;display:flex;flex-direction:column;align-items:center;gap:2px}
.tool .ic{font-size:22px;line-height:1.1}
.tool small{font-size:13px;color:var(--muted)}
.tool.on{box-shadow:inset 0 0 0 2px var(--accent)}
.tool.on small{color:var(--accent);font-weight:600}
.tool:disabled{opacity:.45}
.pad{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.pad button{background:var(--btn);border:0;border-radius:10px;font-size:clamp(22px,6.5vw,30px);color:var(--accent);padding:10px 0;-webkit-touch-callout:none;touch-action:none;position:relative;overflow:hidden}
.pad.nm button{color:var(--muted);font-size:clamp(17px,5vw,22px)}
.pad button.holding::after{content:"";position:absolute;inset:0;background:var(--accent);opacity:.35;transform-origin:left;animation:holdfill .3s linear forwards}
@keyframes holdfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pad button.dim{opacity:.35}
.pad button.lock{background:var(--accent);color:var(--onaccent);opacity:1}
.pad button.done{opacity:.4;color:var(--hkfg)}
.foot{min-height:20px;text-align:center;font-size:13px;color:var(--muted)}
/* Ledtråd: bräde tonas ned, nyckelceller gröna, strykningar rosa */
.board.hinting .c{opacity:.3}
.board.hinting .c.hu,.board.hinting .c.hk,.board.hinting .c.ht,.board.hinting .c.he,.board.hinting .c.hb{opacity:1}
.c.hu{box-shadow:inset 0 0 0 2px var(--accent)}
.c.hk{background:var(--hk)!important}
.c.ht{background:var(--sel)!important}
.notes span.kd{color:var(--hkfg);font-weight:700}
.notes span.elim{color:#fff;background:var(--elim);border-radius:50%}
.notes span.add{color:#fff;background:var(--hkfg);border-radius:50%;font-weight:700}
.c.hb{background:var(--errbg)!important;color:var(--err)!important;text-decoration:line-through}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:5;display:none;padding:0 10px calc(14px + env(safe-area-inset-bottom))}
.sheet.open{display:block}
.sheet .in,.modal .in{max-width:500px;margin:0 auto;background:var(--dlg);border-radius:16px;padding:16px 18px 12px;box-shadow:0 -4px 24px rgba(0,0,0,.25)}
.sheet h3,.modal h3{margin:0 0 6px;font-size:17px;text-align:center}
.sheet .hp,.sheet p{margin:0;min-height:58px;font-size:15px;line-height:1.45;text-align:center;color:var(--fg)}
.hsum{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.4}
.hsum b{color:var(--fg)}
.bl{color:var(--accent);font-weight:600}.gr{color:var(--hkfg);font-weight:600}.pk{color:var(--elim);font-weight:600}
.hnav{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.hnav button{background:none;border:0;color:var(--accent);font-size:16px;font-weight:600;padding:8px 10px;min-width:70px}
.hnav button:disabled{opacity:.3}
.hdots{display:flex;gap:6px}.hdots i{width:7px;height:7px;border-radius:50%;background:var(--line)}.hdots i.on{background:var(--accent)}
.hclose{display:block;margin:4px auto 0;background:none;border:0;color:var(--muted);font-size:13px;padding:6px}
.modal{position:fixed;inset:0;z-index:10;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal .in{width:100%;max-height:88vh;overflow:auto;box-shadow:0 8px 32px rgba(0,0,0,.35)}
.modal p{margin:6px 0;font-size:15px;line-height:1.45}
.modal .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.modal .row:last-of-type{border-bottom:0}
.modal .btns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.modal .btns button,.btn{flex:1;min-width:110px;background:var(--btn);border:0;border-radius:10px;padding:11px 10px;color:var(--fg);font-size:15px}
.btn.pri,.modal .btns button.pri{background:var(--accent);color:var(--onaccent);font-weight:600}
.modal textarea{width:100%;min-height:110px;background:var(--cell);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px;font:13px/1.35 ui-monospace,Menlo,monospace;-webkit-user-select:text;user-select:text}
.modal table{width:100%;border-collapse:collapse;font-size:13px}
.modal th,.modal td{padding:5px 3px;text-align:right;border-bottom:1px solid var(--line)}
.modal th:first-child,.modal td:first-child{text-align:left}
.modal th{color:var(--muted);font-weight:500}
.switch{appearance:none;width:46px;height:28px;border-radius:14px;background:var(--line);position:relative;transition:background .15s;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s}
.switch:checked{background:var(--accent)}.switch:checked::after{transform:translateX(18px)}
.stepper{display:flex;align-items:center;gap:6px}.stepper button{width:34px;height:34px;border:0;border-radius:8px;background:var(--btn);color:var(--fg);font-size:18px}
.rate{display:flex;gap:8px;margin-top:10px}.rate button{flex:1;border:0;border-radius:10px;background:var(--btn);color:var(--fg);padding:10px 4px;font-size:14px}.rate button.on{background:var(--accent);color:var(--onaccent)}
.banner{position:fixed;left:10px;right:10px;top:calc(8px + env(safe-area-inset-top));z-index:20;max-width:480px;margin:0 auto;background:var(--accent);color:var(--onaccent);border-radius:12px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}
.banner[hidden]{display:none}
.banner button{background:var(--onaccent);color:var(--accent);border:0;border-radius:8px;padding:6px 12px;font-weight:600}
.ttt{display:grid;grid-template-columns:repeat(3,64px);gap:6px;justify-content:center;margin:12px 0}
.ttt button{width:64px;height:64px;border:0;border-radius:10px;background:var(--btn);color:var(--fg);font-size:32px}
@media (prefers-reduced-motion:reduce){.c.wave{animation-duration:.01s}}