:root{color-scheme:dark;--gold:#e4b86e;--cream:#f2d7aa;--dark:#17213c;--blue:#7297c7}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f7f5ef;background:radial-gradient(circle at 20% 0,#3a4057 0,transparent 36%),radial-gradient(circle at 90% 85%,#593a35 0,transparent 34%),linear-gradient(145deg,#0c101e,#171a2b 58%,#211827)}button,select{font:inherit}.header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,54px);border-bottom:1px solid #ffe2ad22;background:#090d18b8}.brand,.back{color:inherit;text-decoration:none;font-weight:850}.brand{font-size:23px;letter-spacing:-.05em}.brand span{color:var(--gold)}.brand small{font-size:9px;letter-spacing:.15em;border:1px solid #e5ba7366;border-radius:5px;padding:4px 6px;margin-left:9px;vertical-align:middle}.back{color:#cfcbc3;font-size:12px}.page{max-width:1160px;margin:auto;padding:22px clamp(8px,3vw,28px) 50px}.intro{text-align:center}.eyebrow{margin:0 0 5px;color:#e7bb70;letter-spacing:.24em;font-size:10px;font-weight:900}.intro h1{font-size:clamp(40px,6vw,67px);letter-spacing:-.065em;line-height:1;margin:0}.intro>p:last-child{font-size:12px;color:#aaaebe;margin:10px 0 18px}.layout{display:grid;grid-template-columns:minmax(0,730px) minmax(240px,1fr);gap:20px;align-items:start}.game-shell{border:1px solid #f4d49d42;border-radius:25px;padding:12px 14px 25px;background:linear-gradient(155deg,#30364a,#181d31 66%,#272036);box-shadow:0 35px 95px #000b,inset 0 1px #fff3}.topbar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;margin-bottom:8px}.player{display:flex;align-items:center;gap:9px;color:#c3c4cb;font-size:11px;font-weight:850}.avatar{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:linear-gradient(145deg,#f9dfab,#9d6534);color:#342013;box-shadow:inset 2px 2px #fff8,0 5px 10px #0005;font-size:20px}.player.black .avatar{background:linear-gradient(145deg,#7898bf,#111b35);color:#e2edf9}.status{padding:8px 11px;border:1px solid #ffffff1d;border-radius:10px;background:#0a0f1d88;color:#f2d295;font-size:11px;font-weight:900;text-align:right}.stage{perspective:1200px;perspective-origin:50% 24%;padding:8px 42px 37px;touch-action:manipulation;user-select:none}.board-wrap{position:relative;transform:rotateX(11deg) rotateZ(-1deg);transform-style:preserve-3d}.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;padding:13px;border:8px solid #6e4325;border-radius:9px;background:#4a2b17;box-shadow:20px 28px 0 #26150c,20px 31px 0 3px #a46f38,30px 55px 60px #000c,inset 0 0 0 3px #e4b976;transform-style:preserve-3d}.square{position:relative;border:0;padding:0;display:grid;place-items:center;cursor:pointer;color:#5a3923;background:#d7b783;min-width:0;transform-style:preserve-3d}.square.dark{background:#75482d}.square::after{content:"";position:absolute;inset:0;box-shadow:inset 1px 1px #fff2,inset -1px -1px #0002;pointer-events:none}.square.selected{z-index:2;box-shadow:inset 0 0 0 4px #fff090,0 0 15px #ffe47a}.square.target::before{content:"";position:absolute;z-index:4;width:24%;aspect-ratio:1;border-radius:50%;background:#fff1a9aa;box-shadow:0 0 0 5px #5a411f55}.square.capture::before{width:72%;background:transparent;border:5px solid #ffcf6a9c}.square.last{box-shadow:inset 0 0 0 4px #ffdb5c55}.square.check{box-shadow:inset 0 0 25px #ff3344,inset 0 0 0 4px #ff5964}.coord{position:absolute;z-index:5;font-size:8px;font-weight:900;opacity:.65;pointer-events:none}.coord.file{right:3px;bottom:1px}.coord.rank{left:3px;top:1px}.piece{position:relative;z-index:3;width:78%;height:82%;display:grid;place-items:center;transform:translateZ(24px);filter:drop-shadow(6px 12px 5px #0009);pointer-events:none;animation:drop .23s ease-out}.piece::before{content:"";position:absolute;left:17%;right:17%;bottom:-3%;height:24%;border-radius:50%;background:linear-gradient(90deg,#81542c,#f6d690 45%,#9b642e);box-shadow:inset 0 4px #fff6,inset 0 -5px #47230d,0 5px 5px #0006}.piece.black::before{background:linear-gradient(90deg,#07101f,#7894b7 43%,#14233e);box-shadow:inset 0 4px #bcd5ed66,inset 0 -5px #020713,0 5px 5px #0007}.glyph{position:relative;z-index:2;font-family:"Times New Roman",serif;font-size:clamp(29px,6vw,65px);line-height:1;color:#f4d89b;background:linear-gradient(90deg,#8c572b,#fff0ba 40%,#d49a4d 68%,#73401d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 3px 0 #7b461f,0 6px 5px #0008}.black .glyph{background:linear-gradient(90deg,#071125,#9db8d5 42%,#395578 67%,#071020);-webkit-background-clip:text;background-clip:text;text-shadow:0 3px 0 #050916,0 6px 5px #000}.piece.moved{animation:drop .25s ease-out}@keyframes drop{from{opacity:.25;transform:translateZ(75px) scale(.75)}to{opacity:1;transform:translateZ(24px) scale(1)}}.panel{border:1px solid #eed29b3d;border-radius:20px;padding:18px;background:#25283aaf;box-shadow:inset 0 1px #fff2}.panel h2{margin:0 0 13px;font-size:17px}.group{margin-bottom:14px}.group>span{display:block;margin-bottom:6px;color:#aaaab3;font-size:9px;font-weight:900;letter-spacing:.13em}.segmented{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.segmented.three{grid-template-columns:repeat(3,1fr)}.segmented button,.actions button,.promotion button{cursor:pointer;border:1px solid #ead6b73b;border-radius:9px;background:#37394a;color:#d4d2d0;padding:9px 6px;font-size:10px;font-weight:850}.segmented button.active{color:#281b10;background:linear-gradient(145deg,#ffe5aa,#c98c48);border-color:transparent}.actions{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:14px}.actions .primary{background:linear-gradient(145deg,#b47c3e,#e1b56d);color:#25190e}.history{height:128px;overflow:auto;margin:0 0 14px;padding:8px 8px 8px 31px;border-radius:10px;background:#0b0e1788;color:#bfc0c8;font-size:10px;line-height:1.7;columns:2}.history li::marker{color:#d2a35d}.panel p{font-size:11px;line-height:1.6;color:#b7b7bf;margin:0 0 10px}.panel strong{color:#efd29a}.promotion{position:fixed;z-index:20;inset:0;display:grid;place-items:center;background:#05070dbd;backdrop-filter:blur(7px)}.promotion[hidden]{display:none}.promotion>div{max-width:330px;width:calc(100% - 30px);padding:22px;border:1px solid #f1d39f55;border-radius:18px;background:#242637;text-align:center;box-shadow:0 25px 70px #000}.promotion h2{margin:0 0 15px;font-size:19px}.promotion .choices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.promotion button{font:34px "Times New Roman",serif;padding:11px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:820px){.page{padding:14px 5px 34px}.intro h1{font-size:43px}.intro>p:last-child{margin:8px 0 12px;font-size:10px}.layout{display:flex;flex-direction:column;gap:12px}.game-shell,.panel{width:100%}.game-shell{padding:8px 5px 17px;border-radius:16px}.stage{padding:5px 8px 27px}.board{padding:7px;border-width:5px;box-shadow:9px 15px 0 #26150c,9px 17px 0 2px #a46f38,16px 31px 37px #000a}.piece{width:88%;height:88%;transform:translateZ(16px)}.glyph{font-size:clamp(29px,10vw,54px)}.square.capture::before{border-width:3px}.topbar{padding:0 4px}.status{font-size:9px}.player{font-size:9px}.panel{padding:14px}.history{height:90px}}