:root{--bg:#f5f3ef;--panel:#fff;--panel2:#f8f6f1;--border:#e8e3da;--text:#20252b;--muted:#69727d;--faint:#9aa1aa;--accent:#29536b;--good:#27834f;--bad:#bd4b4b;--warn:#a8731e;--light:#f0dfbe;--dark:#b88758;--hi:#e8c866;--rim:#573b26;--piece-white:#fffaf0;--piece-black:#30251d;--serif:Spectral,Georgia,serif;--sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--shadow:0 18px 40px -24px rgba(28,28,28,.25)}
html.dark{--bg:#10151b;--panel:#171e26;--panel2:#202933;--border:#2d3945;--text:#edf0f2;--muted:#a5b0bc;--faint:#71808f;--accent:#82c6df;--good:#6ed89a;--bad:#ff8991;--warn:#efc975;--light:#7893a4;--dark:#375769;--hi:#527e91;--rim:#172d39;--piece-white:#f7f3e8;--piece-black:#172027;--shadow:0 18px 42px -25px #000}
html[data-board-theme="walnut"]{--light:#ecd7b2;--dark:#9a6748;--hi:#dcbb62;--rim:#4a2e21;--piece-white:#fffaf0;--piece-black:#291d18}
html.dark[data-board-theme="walnut"]{--light:#896c5b;--dark:#5a382d;--hi:#806837;--rim:#2b1914;--piece-white:#f7eee1;--piece-black:#1e1513}
html[data-board-theme="slate"]{--light:#d9e1e4;--dark:#718c99;--hi:#dbb95b;--rim:#354d57;--piece-white:#f8f8f3;--piece-black:#253039}
html.dark[data-board-theme="slate"]{--light:#687d87;--dark:#344c59;--hi:#8c7844;--rim:#1c2a32;--piece-white:#edf0ed;--piece-black:#172126}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -15%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 34%),var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}.app{max-width:560px;margin:0 auto;min-height:100dvh;padding:calc(18px + env(safe-area-inset-top)) 18px 100px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--accent);text-transform:uppercase}.title{font:500 34px/1.06 var(--serif);letter-spacing:-.03em;margin:8px 0}.sub{color:var(--muted);font-size:14px;line-height:1.55;margin:0}.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:25px}.mark{display:flex;gap:9px;align-items:center;font:500 20px var(--serif)}.mark img{width:30px;height:30px}.icon{border:1px solid var(--border);background:var(--panel);color:var(--muted);border-radius:12px;width:43px;height:43px;font-size:18px}.section{margin-top:27px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.section-head h2{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0}.card{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:16px;padding:16px}.card+.card{margin-top:10px}.opening,.continue{width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer}.opening:active{transform:scale(.99)}.row{display:flex;align-items:center;gap:10px}.grow{flex:1}.name{font:500 20px var(--serif);letter-spacing:-.015em}.meta{font-size:12px;color:var(--muted);margin-top:5px}.tag,.sync{font-size:11px;border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:4px 8px;white-space:nowrap}.bar{height:6px;background:var(--panel2);border-radius:9px;overflow:hidden;margin-top:13px}.bar i{display:block;height:100%;background:var(--accent);border-radius:inherit}.chev{color:var(--faint);font-size:20px}.board-wrap{margin:20px auto 13px;max-width:456px;padding:5px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--rim) 82%,white),var(--rim));box-shadow:0 18px 34px -17px rgba(0,0,0,.65)}.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--rim) 70%,black);border-radius:10px;overflow:hidden;background:var(--rim)}.sq{border:0;padding:0;position:relative;display:grid;place-items:center;line-height:1;cursor:pointer;isolation:isolate}.sq.light{background:var(--light)}.sq.dark{background:var(--dark)}.sq.selected{box-shadow:inset 0 0 0 4px #54b5e7}.sq.last{background:var(--hi)}.sq.hint{box-shadow:inset 0 0 0 4px rgba(39,131,79,.95)}.sq::after{content:attr(data-coord);position:absolute;font:700 9px var(--sans);right:3px;bottom:2px;color:color-mix(in srgb,var(--dark) 86%,#111);z-index:2}.sq.dark::after{color:color-mix(in srgb,var(--light) 84%,white)}.sq:nth-child(8n+1)::after{left:3px;right:auto;bottom:auto;top:2px}.piece{width:78%;height:78%;overflow:visible;filter:drop-shadow(0 2px 1px rgba(0,0,0,.27));z-index:1}.piece.w{--piece-fill:var(--piece-white);--piece-edge:#8c7358;--piece-detail:rgba(112,82,54,.5)}.piece.b{--piece-fill:var(--piece-black);--piece-edge:#111519;--piece-detail:rgba(255,255,255,.19)}.piece .body{fill:var(--piece-fill);stroke:var(--piece-edge);stroke-width:3;stroke-linejoin:round}.piece .detail{fill:none;stroke:var(--piece-detail);stroke-width:2.6;stroke-linecap:round}.feedback,.note{border-left:3px solid var(--accent);background:var(--panel);border-radius:10px;padding:11px 12px;font-size:13px;line-height:1.45;color:var(--muted);margin:14px 0}.note{border-color:var(--warn)}.feedback.good{border-color:var(--good)}.feedback.bad{border-color:var(--bad)}.feedback.warn{border-color:var(--warn)}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.btn{border:1px solid var(--border);background:var(--panel);border-radius:11px;padding:11px 14px;color:var(--text);font:600 13px var(--sans);cursor:pointer}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.danger{color:var(--bad)}.btn.full{width:100%}.btn:disabled{opacity:.55;cursor:not-allowed}.back{border:0;background:none;color:var(--muted);font-size:14px;padding:0 0 12px;cursor:pointer}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:19px}.mode{min-height:124px;text-align:left}.mode strong{display:block;font:500 19px var(--serif);margin-bottom:7px}.mode p{margin:0;font-size:12px;line-height:1.45;color:var(--muted)}.continue b{display:block;font:500 20px var(--serif)}.continue span{color:var(--muted);font-size:12px;display:block;margin-top:5px}.move-list{display:flex;flex-wrap:wrap;gap:6px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:9px 11px;color:var(--muted);font-size:12px;line-height:1.4}.move-list span{padding-right:6px;border-right:1px solid var(--border)}.tabs{position:fixed;z-index:5;bottom:0;left:0;right:0;background:color-mix(in srgb,var(--panel) 95%,transparent);backdrop-filter:blur(15px);border-top:1px solid var(--border);padding:8px max(16px,calc((100vw - 560px)/2 + 18px)) calc(8px + env(safe-area-inset-bottom));display:flex;justify-content:space-between}.tab{flex:1;border:0;background:transparent;color:var(--muted);font:600 11px var(--sans);padding:6px 4px;cursor:pointer}.tab span{display:block;font-size:21px;font-weight:400;line-height:1.15;margin-bottom:2px}.tab.on{color:var(--accent)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{padding:13px 9px;text-align:center}.stat b{display:block;font:500 23px var(--serif)}.stat small{display:block;color:var(--muted);font-size:10px;line-height:1.25;margin-top:4px}.filter{display:flex;gap:7px;overflow:auto;padding:2px 0 5px}.chip{white-space:nowrap;border:1px solid var(--border);background:var(--panel);border-radius:999px;color:var(--muted);padding:7px 10px;font:600 12px var(--sans)}.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}.puzzle-head{display:flex;align-items:end;justify-content:space-between;margin:18px 0 8px}.rating{font:500 26px var(--serif)}.list-row{padding:14px 0;border-bottom:1px solid var(--border)}.list-row:last-child{border-bottom:0}.settings{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:10;display:flex;align-items:end}.settings .sheet{width:100%;background:var(--panel);border-radius:20px 20px 0 0;padding:20px 18px calc(26px + env(safe-area-inset-bottom));box-shadow:0 -12px 35px rgba(0,0,0,.18)}.setting{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-top:1px solid var(--border);font-size:14px}.setting select{border:1px solid var(--border);background:var(--panel2);color:var(--text);padding:8px;border-radius:9px}.sr-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.update{position:fixed;z-index:30;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;border:0;border-radius:999px;padding:10px 14px;font:600 12px var(--sans);box-shadow:var(--shadow)}button:focus-visible,.btn:focus-visible,.sq:focus-visible,select:focus-visible{outline:3px solid #54b5e7;outline-offset:2px}@media(min-width:600px){.app{padding-left:28px;padding-right:28px}}