:root{--bg:#14110e;--bg2:#221b14;--panel:#1c1712;--panel-border:#3a2f24;--text:#f3ead9;--muted:#a99a82;--accent:#c9a24b;--accent2:#e6c877;--light:#e8d9b8;--dark:#8a6a44;--sel:#c9a24b;--last:rgba(201,162,75,0.38);--check:#e0533d;--piece-light:#fbf5e6;--piece-dark:#241a10;--piece-stroke:rgba(0,0,0,0.35);--font-display:"Syne",sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--board-shadow:0 30px 80px -20px rgba(0,0,0,0.8);--grain:0.04;--radius:14px}*{box-sizing:border-box}body,html{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .5s ease,color .5s ease}.app,body{min-height:100dvh}.app{position:relative;background:radial-gradient(120% 90% at 50% -10%,var(--bg2),var(--bg) 60%);transition:background .5s ease;isolation:isolate}.app:before{z-index:-2;background:var(--bg-fx,none);opacity:.5}.app:after,.app:before{content:"";position:fixed;inset:0;pointer-events:none}.app:after{z-index:-1;opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}a{color:inherit}button{font-family:inherit;cursor:pointer}::selection{background:var(--accent);color:var(--bg)}.wrap{max-width:1120px;margin:0 auto;padding:clamp(16px,3vw,34px)}.topbar{justify-content:space-between;gap:16px;margin-bottom:clamp(18px,3vw,30px)}.brand,.topbar{display:flex;align-items:center}.brand{gap:12px;font-family:var(--font-display);font-weight:800;font-size:clamp(20px,3vw,28px);letter-spacing:-.02em;line-height:1}.brand .mark{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--accent);box-shadow:0 6px 20px -6px var(--accent)}.brand .mark .pcs{width:26px;height:26px;filter:none}.brand .mark .pcs .body{fill:var(--bg);stroke:none}.brand .mark .pcs .detail{stroke:var(--accent)}.brand .byo{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}.brand .byo,.pill{font-weight:600;color:var(--muted)}.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--panel-border);border-radius:999px;background:color-mix(in srgb,var(--panel) 80%,transparent);font-size:12px;white-space:nowrap}.pill b{color:var(--text)}.card{background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--panel-border);border-radius:var(--radius);padding:clamp(16px,2.4vw,22px)}.card h2{font-family:var(--font-display);font-weight:700;margin:0 0 4px;font-size:18px;letter-spacing:-.01em}.card .sub{font-size:13px;margin:0 0 16px;line-height:1.5}.card .sub,.label{color:var(--muted)}.label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;font-weight:600}.seg{display:inline-flex;gap:4px;padding:4px;background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--panel-border);border-radius:11px;flex-wrap:wrap}.seg button{border:0;background:transparent;color:var(--muted);padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;transition:.16s ease}.seg button:hover{color:var(--text)}.seg button[data-on=true]{background:var(--accent);color:var(--bg)}.field{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--panel-border);background:color-mix(in srgb,var(--bg) 55%,transparent);color:var(--text);font-family:var(--font-mono);font-size:14px;outline:none;transition:border-color .16s ease}.field:focus{border-color:var(--accent)}select.field{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:11px;border:1px solid var(--panel-border);background:color-mix(in srgb,var(--panel) 80%,transparent);color:var(--text);font-weight:700;font-size:14px;transition:.16s ease}.btn.primary,.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:var(--bg);box-shadow:0 10px 30px -12px var(--accent)}.btn.primary:hover{filter:brightness(1.06)}.btn.ghost{background:transparent}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.block{width:100%}.setup{display:grid;grid-template-columns:1.25fr 1fr;grid-gap:clamp(16px,2.4vw,22px);gap:clamp(16px,2.4vw,22px);align-items:start}@media (max-width:900px){.setup{grid-template-columns:1fr}}.stack{flex-direction:column;gap:18px}.row,.stack{display:flex}.row{gap:10px;flex-wrap:wrap}.row>*{flex:1 1;min-width:0}.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:10px;gap:10px}.swatch{position:relative;border:1px solid var(--panel-border);border-radius:12px;padding:12px;text-align:left;overflow:hidden;transition:.16s ease;color:inherit;background:transparent}.swatch:hover{transform:translateY(-2px)}.swatch[data-on=true]{border-color:var(--sw-accent);box-shadow:0 0 0 1px var(--sw-accent)}.swatch .mini{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);width:100%;aspect-ratio:2/1;border-radius:7px;overflow:hidden;margin-bottom:9px}.swatch .mini i{display:block}.swatch .nm{font-family:var(--font-display);font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px}.swatch .tg{font-size:11px;color:var(--muted);margin-top:2px}.game{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-gap:clamp(14px,2.4vw,24px);gap:clamp(14px,2.4vw,24px);align-items:start}@media (max-width:920px){.game{grid-template-columns:1fr}}.boardcol{flex-direction:column;min-width:0}.boardcol,.player{display:flex;gap:12px}.player{align-items:center;padding:10px 14px;border:1px solid var(--panel-border);border-radius:12px;background:color-mix(in srgb,var(--panel) 80%,transparent)}.player[data-active=true]{border-color:var(--accent)}.player .who{display:flex;flex-direction:column;gap:2px;min-width:0}.player .who .nm{font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px}.player .who .mdl{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player .clock{margin-left:auto;font-family:var(--font-mono);font-weight:700;font-size:22px;letter-spacing:.02em;padding:4px 12px;border-radius:9px;background:color-mix(in srgb,var(--bg) 55%,transparent);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.player[data-active=true] .clock{background:var(--accent);color:var(--bg)}.player .clock[data-low=true]{color:var(--check)}.badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent);white-space:nowrap}.badge.human{background:color-mix(in srgb,var(--accent2) 22%,transparent);color:var(--accent2)}.board-shell{border-radius:18px;padding:10px;background:color-mix(in srgb,var(--panel) 70%,transparent);border:1px solid var(--panel-border);box-shadow:var(--board-shadow)}.board,.board-shell{position:relative;width:100%}.board{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);aspect-ratio:1/1;border-radius:10px;overflow:hidden;touch-action:manipulation}.board,.sq{display:grid}.sq{position:relative;place-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background .4s ease}.sq.lt{background:var(--light)}.sq.dk{background:var(--dark)}.sq[data-last=true]:after{content:"";position:absolute;inset:0;background:var(--last)}.sq[data-check=true]{animation:checkpulse 1.1s ease-in-out infinite}@keyframes checkpulse{0%,to{box-shadow:inset 0 0 0 4px var(--check)}50%{box-shadow:inset 0 0 0 7px var(--check)}}.sq[data-check=true] .piece{animation:shake .45s ease}@keyframes shake{0%,to{transform:none}25%{transform:translateX(-6%) rotate(-4deg)}75%{transform:translateX(6%) rotate(4deg)}}.sq[data-hint=true]{box-shadow:inset 0 0 0 3px var(--accent2)}.sq[data-hint=true]:before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--accent2) 18%,transparent);animation:hintpulse 1.2s ease-in-out infinite}@keyframes hintpulse{50%{opacity:.35}}.sq .coord{position:absolute;font-size:9px;font-weight:700;opacity:.55;font-family:var(--font-mono)}.sq .coord.f{bottom:2px;right:4px}.sq .coord.r{top:2px;left:4px}.sq.lt .coord{color:var(--dark)}.sq.dk .coord{color:var(--light)}.piece{position:relative;z-index:2;width:100%;height:100%;display:grid;place-items:center;transition:translate .14s ease,scale .14s ease;will-change:transform}.pcs{width:84%;height:84%;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)) drop-shadow(0 0 6px var(--piece-glow,transparent))}.pcs .body{stroke-width:1.1;stroke-linejoin:round}.pcs.w .body{fill:var(--piece-light);stroke:rgba(0,0,0,.45)}.pcs.b .body{fill:var(--piece-dark);stroke:rgba(255,255,255,.3)}.pcs .detail{stroke-width:1.4;stroke-linecap:round}.pcs.w .detail{stroke:rgba(0,0,0,.4)}.pcs.b .detail{stroke:rgba(255,255,255,.35)}.piece[data-slide=true]{animation:slide .24s cubic-bezier(.2,.75,.25,1)}@keyframes slide{0%{transform:translate(var(--fx,0),var(--fy,0)) scale(1.06)}to{transform:translate(0) scale(1)}}.boom{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none;animation:boom .55s ease-out forwards}.boom .pcs{width:74%;height:74%}.boom:after{content:"";position:absolute;width:68%;height:68%;border-radius:50%;border:3px solid var(--accent);animation:boomring .55s ease-out forwards}@keyframes boom{0%{transform:scale(1) rotate(0deg);opacity:1}55%{transform:scale(1.45) rotate(14deg);opacity:.7}to{transform:scale(.15) rotate(38deg) translateY(-60%);opacity:0}}@keyframes boomring{0%{transform:scale(.4);opacity:.9}to{transform:scale(1.9);opacity:0}}.sq.clickable:hover .piece{translate:0 -4%}.sq[data-sel=true]{box-shadow:inset 0 0 0 4px var(--sel)}.sq[data-sel=true] .piece{scale:1.1}.dot{width:30%;height:30%;background:color-mix(in srgb,var(--sel) 70%,transparent);opacity:.75}.dot,.ring{position:absolute;z-index:1;border-radius:50%}.ring{inset:8%;border:4px solid color-mix(in srgb,var(--sel) 80%,transparent);opacity:.8}.sq.clickable{cursor:pointer}.overlay{position:absolute;inset:10px;border-radius:10px;display:grid;place-items:center;text-align:center;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:5;padding:24px;animation:fade .35s ease}.overlay h3{font-family:var(--font-display);font-size:clamp(26px,6vw,44px);margin:6px 0;letter-spacing:-.02em}.overlay p{color:var(--muted);margin:0 0 18px;max-width:30ch}@keyframes fade{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.side{display:flex;flex-direction:column;gap:14px}.quip{border:1px solid var(--panel-border);border-radius:12px;padding:14px 16px;background:color-mix(in srgb,var(--panel) 80%,transparent);min-height:74px}.quip .from{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:6px}.quip .txt{font-size:14px;line-height:1.45}.quip .txt.think:after{content:"▍";animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}.moves{border:1px solid var(--panel-border);border-radius:12px;background:color-mix(in srgb,var(--panel) 80%,transparent);overflow:hidden}.moves .hd{padding:10px 14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--panel-border)}.movelist{max-height:220px;overflow-y:auto;padding:8px 10px;display:grid;grid-template-columns:28px 1fr 1fr;grid-gap:2px 6px;gap:2px 6px;font-size:13px;align-content:start}.movelist .n{color:var(--muted);text-align:right;padding-right:4px}.movelist .m{padding:3px 6px;border-radius:6px}.movelist .m:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}.movelist .empty{grid-column:1/-1;color:var(--muted);padding:10px 4px}.statsrow{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:8px;gap:8px}.stat{text-align:center;padding:12px 6px;border:1px solid var(--panel-border);border-radius:11px;background:color-mix(in srgb,var(--panel) 80%,transparent)}.stat b{display:block;font-family:var(--font-display);font-size:22px;line-height:1}.stat span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.assistrow{display:flex;gap:8px}.assistrow .btn{flex:0 0 auto;padding:11px 18px;font-size:13px}.field.compact{padding:8px 11px;font-size:12px;min-width:0;flex:1 1}.controls{display:flex;gap:8px;flex-wrap:wrap}.controls .btn{flex:1 1;padding:11px 12px;font-size:13px}.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--check);color:var(--text);padding:12px 16px;border-radius:11px;font-size:13px;z-index:50;max-width:90vw;box-shadow:0 12px 40px -10px rgba(0,0,0,.6);animation:fade .25s ease}.topactions{display:flex;align-items:center;gap:10px}.btn.gear{padding:9px 13px;font-size:16px;line-height:1}.btn.gear[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}.scrim{position:fixed;inset:0;z-index:30;background:transparent}.settings{position:fixed;z-index:40;top:76px;right:max(16px,calc((100vw - 1120px) / 2 + 16px));width:340px;max-height:min(78vh,720px);overflow-y:auto;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:16px;box-shadow:0 24px 70px -18px rgba(0,0,0,.75);animation:fade .18s ease;display:flex;flex-direction:column;gap:8px}.settings .label{margin:10px 0 4px}.settings .seg{align-self:flex-start}.settings-hd{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-weight:700;font-size:16px}.settings-hd .x{border:0;background:transparent;color:var(--muted);font-size:14px;padding:4px 8px;border-radius:7px}.settings-hd .x:hover{color:var(--text)}@media (max-width:720px){.settings{top:64px;left:10px;right:10px;width:auto;max-height:74vh;border-radius:12px}.scrim{background:rgba(0,0,0,.35)}}.skinrow{display:flex;flex-wrap:wrap;gap:7px}.skindot{width:34px;height:34px;border-radius:9px;border:1px solid var(--panel-border);padding:0;transition:.14s ease}.skindot:hover{transform:translateY(-2px)}.skindot[data-on=true]{border-color:var(--sw-accent);box-shadow:0 0 0 2px var(--sw-accent)}.skinname{font-size:11px;color:var(--muted);line-height:1.4}.kicon,.kicon .pcs{width:18px;height:18px;display:inline-block;vertical-align:-3px}.btn.promo{padding:8px 12px}.btn.promo .pcs{width:34px;height:34px}.ovpiece{display:inline-block;width:52px;height:52px}.ovpiece .pcs{width:100%;height:100%}.footer{margin-top:34px;padding-top:18px;border-top:1px solid var(--panel-border);color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.footer code{color:var(--text)}.disclose{font-size:11px;color:var(--muted);line-height:1.5}details.adv summary{cursor:pointer;color:var(--muted);font-size:12px;font-weight:600;padding:6px 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}details.adv[open] summary{color:var(--text)}