:root{--bg:#0b0a1f;--panel:#17153a;--text:#eef0ff;--muted:#9a9cc8;--cyan:#22d3ee;--pink:#f472b6;--lime:#a3e635;--light-square:#dfe3ff;--dark-square:#6d5bd0;--board:min(100vw - 16px, 100svh - 300px, 640px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);-webkit-tap-highlight-color:transparent;font-family:ui-rounded,SF Pro Rounded,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 15% 0%, #3b1d6e 0, transparent 45%), radial-gradient(circle at 100% 100%, #0e4a5c 0, transparent 40%), var(--bg);overscroll-behavior:none;min-height:100svh;margin:0}button{font:inherit;color:inherit;touch-action:manipulation}.splash{place-items:center;min-height:100svh;font-size:1.5rem;font-weight:800;animation:1.2s ease-in-out infinite pulse;display:grid}.app{min-height:100svh;padding:max(8px, env(safe-area-inset-top)) 8px max(12px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:8px;display:flex}header{width:var(--board);justify-content:space-between;align-items:center;display:flex}h1{letter-spacing:.02em;background:linear-gradient(90deg, var(--cyan), var(--pink));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:1.4rem;font-weight:900}.live{letter-spacing:.1em;color:var(--pink);background:#3f1d2e;border-radius:99px;padding:3px 8px;font-size:.7rem;font-weight:800}.live.on{color:var(--lime);background:#1c3a12}.player{width:var(--board);background:var(--panel);border:2px solid #0000;border-radius:14px;align-items:center;gap:10px;padding:8px 12px;font-weight:700;transition:border-color .2s,box-shadow .2s;display:flex}.player.active{border-color:var(--cyan);box-shadow:0 0 16px #22d3ee66}.player .name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.player .wins{color:var(--muted);font-size:.9rem}.dot{border:2px solid var(--muted);border-radius:50%;width:14px;height:14px}.dot.white{background:#fff}.dot.black{background:#111}.board-wrap{width:var(--board);height:var(--board);position:relative}.app.my-turn .board-wrap{filter:drop-shadow(0 0 14px #a3e63555)}.board{border-radius:12px;grid-template-columns:repeat(8,1fr);width:100%;height:100%;display:grid;position:relative;overflow:hidden}.square{aspect-ratio:1;border:0;place-items:center;padding:0;display:grid;position:relative}.square.light{background:var(--light-square)}.square.dark{background:var(--dark-square)}.square.last:before,.square.selected:before,.square.checked:before{content:"";position:absolute;inset:0}.square.last:before{background:#facc1566}.square.selected:before{background:#22d3ee88}.square.checked:before{background:radial-gradient(circle,#ff2d55 0%,#ff2d5588 45%,#0000 75%);animation:.9s ease-in-out infinite pulse}.square.target:after{content:"";width:30%;height:30%;box-shadow:0 0 10px var(--cyan);background:#22d3eecc;border-radius:50%;position:absolute}.square.capture:after{content:"";border:4px solid var(--pink);box-shadow:0 0 10px var(--pink);border-radius:50%;position:absolute;inset:4%}.piece{z-index:1;pointer-events:none;-webkit-user-select:none;user-select:none;width:90%;height:90%;position:relative}.piece.arrived{animation:.35s cubic-bezier(.34,1.56,.64,1) land}.promotion{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2;background:#0b0a1fcc;flex-wrap:wrap;place-content:center;gap:10px;display:flex;position:absolute;inset:0}.promotion button{aspect-ratio:1;border:2px solid var(--cyan);background:var(--panel);border-radius:16px;width:22%}.promotion button img{width:85%}.promotion .cancel{aspect-ratio:auto;border-color:var(--muted);width:auto;padding:0 18px;font-size:1.4rem}.banner{text-align:center;min-height:1.5em;margin:4px 0 0;font-size:1.15rem;font-weight:800}.banner.alert{color:#f57;animation:.4s shake}.draws{color:var(--muted);margin:0;font-size:.85rem}.controls{width:var(--board);flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:auto;display:flex}.ask{text-align:center;width:100%;color:var(--cyan);font-weight:700}.btn{background:var(--panel);border:0;border-radius:16px;flex:1;justify-content:center;align-items:center;min-height:52px;padding:0 16px;font-size:1.05rem;font-weight:800;text-decoration:none;transition:transform .1s;display:inline-flex;box-shadow:inset 0 0 0 2px #fff2}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.5}.btn.primary{background:linear-gradient(135deg, var(--cyan), #8b5cf6);color:#0b0a1f}.btn.white{color:#0b0a1f;background:#f4f4ff}.btn.black{box-shadow:inset 0 0 0 2px var(--pink);background:#000}.btn.danger{background:#ff2d55}.toast{left:50%;bottom:max(90px, calc(env(safe-area-inset-bottom) + 80px));z-index:10;background:#ff2d55;border-radius:99px;padding:10px 18px;font-weight:700;animation:.25s pop;position:fixed;transform:translate(-50%)}.confetti{pointer-events:none;z-index:3;position:absolute;inset:0;overflow:hidden}.confetti i{border-radius:2px;width:8px;height:14px;animation:linear forwards fall;position:absolute;top:-20px}@keyframes land{0%{transform:scale(1.35)}to{transform:scale(1)}}@keyframes pulse{50%{opacity:.5}}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes pop{0%{opacity:0;transform:translate(-50%)scale(.7)}}@keyframes fall{to{transform:translateY(calc(var(--board) + 40px)) rotate(720deg)}}