:root{font-family:Segoe UI,Arial,sans-serif;color:#f1edf5;background:#17151c;color-scheme:dark;font-synthesis:none;--accent:#b36bff}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #51435f;background:#292331;border-radius:7px;padding:10px 13px}button:hover:not(:disabled){background:#42324f}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{opacity:.4;cursor:default}header{margin:0 30px;padding:26px 0 22px;border-bottom:1px solid #332b3d;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:26px;letter-spacing:1px;font-weight:750}.brand span{color:var(--accent)}.brand small{display:block;font-size:11px;letter-spacing:.3px;font-weight:400;color:#aca3b5;margin-top:5px}.local{font-size:12px;color:#c3b7ce;border:1px solid #3c3148;border-radius:20px;padding:8px 13px}main{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,480px) minmax(180px,1fr);gap:32px;padding:32px 30px 20px;align-items:start}nav{display:flex;flex-direction:column;gap:18px;align-items:flex-start;margin-left:-30px;padding-top:20px}nav strong{border-left:3px solid var(--accent);padding:12px 32px;background:#30223f;border-radius:0 8px 8px 0;color:var(--accent);font-size:14px}nav button{border:0;background:none;font-size:14px;margin-left:18px}.nav-note{font-size:12px;color:#8e8399;line-height:1.8;margin:22px 32px}.game{min-width:0}.player{display:flex;justify-content:space-between;font-size:14px;margin:0 0 13px}.player:has(+.legend){margin-top:13px}.player span+span{font-size:12px;color:var(--accent)}#board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));aspect-ratio:1;border:1px solid #19171e;border-radius:2px;overflow:hidden;margin:0;box-shadow:0 1px 0 #69616f55,0 -1px 2px #09080dc9}.square{border:0;border-radius:0;aspect-ratio:1;padding:0;background:#ede9f1;position:relative;display:grid;place-items:center;min-width:0}.square.dark{background:#8a779e}.square:hover:not(:disabled){background:#b2a0c5}.square.selected{box-shadow:inset 0 0 0 4px #9250d4;background:#a180c3}.square.last{background:#d0bbdf}.square.dark.last{background:#9c7fb4}.square svg{width:88%;height:88%;overflow:visible;filter:drop-shadow(0 1px 1px rgba(20,14,28,.24))}.square.double svg{opacity:.6}.square .double-mark{position:absolute;top:3%;right:5%;color:#653090;font-size:13px;font-weight:bold}.square.legal:before{content:'';position:absolute;width:22%;height:22%;background:#59258199;border-radius:50%;z-index:2;pointer-events:none}.square.capture:before{width:84%;height:84%;background:transparent;border:4px solid #71388c99}.square.special:before{border-radius:2px;transform:rotate(45deg);background:#6d319eaa;width:22%;height:22%;border:2px solid #e9d4ff}.square.ghost{box-shadow:inset 0 0 0 3px #9250d4}.coord{position:absolute;font-size:9px;left:4px;bottom:2px;color:#584568;z-index:3}.rank{top:2px;bottom:auto}.legend{font-size:11px;color:#b8acbf;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.legend i{width:5px;height:5px;background:var(--accent);border-radius:50%}.legend b{color:var(--accent);margin-left:9px}#status{margin:20px 0 15px;min-height:25px;font-weight:600;color:#dbc0f4;line-height:1.5}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button{font-size:12px}aside{width:100%;max-width:330px;justify-self:end;display:grid;gap:16px}.panel{background:#211d29;border:1px solid #352c40;border-radius:12px;padding:20px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--accent);font-weight:700}h1{font-size:21px;font-weight:600;line-height:1.35;margin:10px 0}h2{font-size:16px;margin:0 0 16px}.muted{font-size:12px;line-height:1.7;color:#ada2b9}#ability{border-top:1px solid #3c3346;margin-top:18px;padding-top:18px;min-height:140px}#ability strong{font-size:14px;color:#d4b0f4}#ability p{font-size:13px;line-height:1.65;color:#c8bfce}#ability small{font-size:11px;color:#a898b5}.moves{max-height:280px;overflow:auto}.moves ol{padding:0;margin:0;list-style:none;counter-reset:move}.moves li{font-size:12px;line-height:1.7;border-top:1px solid #332b3d;padding:7px 0}.moves li small{display:block;color:#aa92be}.moves li span{color:#a290b2;margin-right:10px}#vanish-info{font-size:12px;color:#d4aff5;line-height:1.6}footer{margin:30px;display:flex;justify-content:space-between;font-size:11px;color:#82768d;gap:16px}dialog{max-width:640px;width:calc(100% - 36px);max-height:85vh;overflow:auto;background:#211d29;color:#f1edf5;border:1px solid #655074;border-radius:12px;padding:25px}dialog::backdrop{background:#0c0911c9}dialog p{font-size:14px;line-height:1.7;color:#c8bfce}.dialog-top{display:flex;justify-content:space-between;align-items:baseline}a{color:#c894ff}#promotion-options{display:flex;gap:8px;flex-wrap:wrap}#rules-content h3{color:#d2a8f5;font-size:14px;margin:20px 0 0}@media(min-width:1500px){main{grid-template-columns:minmax(180px,1fr) minmax(0,520px) minmax(180px,1fr)}aside{justify-self:start;margin-left:24px}}@media(max-width:1050px){main{gap:20px;grid-template-columns:minmax(100px,1fr) minmax(0,440px) minmax(190px,1fr)}.panel{padding:15px}nav strong{padding-right:18px}nav button{margin-left:13px}.nav-note{margin-left:25px}}@media(max-width:800px){main{grid-template-columns:100px minmax(0,480px);justify-content:center}aside{grid-column:2;max-width:480px;grid-template-columns:1fr 1fr;align-items:start}.panel{min-width:0}.moves{max-height:420px}header{margin:0 20px}}@media(max-width:580px){header{padding:18px 0}.brand{font-size:22px}.local{font-size:10px;padding:6px 9px}main{display:flex;flex-direction:column;padding:18px 14px;gap:16px}nav{margin:0;padding:0;flex-direction:row;align-items:center;gap:10px}nav strong{padding:7px 14px;border-radius:4px}nav button{margin:0;padding:6px}.nav-note{display:none}.game{width:100%;max-width:480px;align-self:center}aside{max-width:480px;align-self:center;display:flex;flex-direction:column}.panel{width:100%}.moves{max-height:240px}#ability{min-height:0}footer{margin:20px 14px}.coord{font-size:8px}}

/* Combined legal targets: normal dot/ring plus a separate special diamond. */
.ability-crystal .crystal-body{fill:#55515b;stroke:#77717f;stroke-width:.6}.ability-crystal .crystal-facet{fill:#3b3741}.ability-crystal.active{filter:drop-shadow(0 0 1.6px #3799dfaa)}.ability-crystal.active .crystal-body{fill:#77c9f2;stroke:#b6e7ff}.ability-crystal.active .crystal-facet{fill:#3385bf}.legend i{width:7px;height:9px;border-radius:0;transform:rotate(45deg);background:#64bdec;box-shadow:0 0 5px #3799df66}
.ability-motion{position:fixed;z-index:11;pointer-events:none;box-sizing:border-box;transform-origin:center;border:1px solid #90b9dd80;border-radius:50%;will-change:transform,opacity}.ability-motion.vanish{background:radial-gradient(ellipse,#160e22 10%,#63418780 43%,transparent 70%);border-color:#b388d488}.ability-motion.shift{border-color:#a5bbca99;background:#17151c80}.ability-motion.breach{border-radius:2px;border-color:#c2b5d7aa}.ability-motion.strike{height:2px;border:0;border-radius:0;background:linear-gradient(90deg,transparent,#b8c3d5bb);transform-origin:left center}.ability-motion.double{border-radius:40%;border-color:#c0addb66}.ability-motion.sprint{border:0;border-bottom:2px solid #b7c2d066;border-radius:0}@media(prefers-reduced-motion:reduce){.ability-motion{display:none}}
.square.special.normal-target:before{border-radius:50%;transform:none;background:#59258199;border:0;width:22%;height:22%;margin-left:-25%}
.square.special.normal-target.capture:before{width:84%;height:84%;margin:0;background:transparent;border:4px solid #71388c99}


.special-mark{position:absolute;z-index:4;pointer-events:none;width:16%;height:16%;border:2px solid #efdfff;background:#7735ac;transform:rotate(45deg);left:60%;top:42%}
#move-choice{position:fixed;z-index:20;display:flex;gap:4px;padding:5px;border:1px solid #b36bff;border-radius:8px;background:#241b2f;box-shadow:0 5px 20px #0007;max-width:calc(100vw - 16px)}
#move-choice[hidden]{display:none}#move-choice button{font-size:12px;padding:9px 12px;border:0;background:transparent;min-height:36px;white-space:nowrap}#move-choice button:hover,#move-choice button:focus-visible{background:#533180;color:#f6edff;outline:2px solid #b36bff;outline-offset:-2px}

.square svg.return-crown{position:absolute;width:65%;height:58%;pointer-events:none;opacity:.78;z-index:3;fill:none;filter:drop-shadow(0 1px 1px #211b2866)}
.square svg.return-crown.white{color:#d0cbc3;filter:drop-shadow(0 0 1px #403348b3)}
.square svg.return-crown.black{color:#302637;filter:drop-shadow(0 0 1px #ede9f180)}
.square svg.return-crown.occupied{width:29%;height:26%;top:5%;right:5%;opacity:.85}

.piece-motion{position:fixed;z-index:10;pointer-events:none;transform-origin:center;will-change:transform,opacity}
.piece-motion svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 1px 1px rgba(20,14,28,.24))}
#sound[aria-pressed=true]{border-color:#76508e;color:#d6b8ed}
@media(prefers-reduced-motion:reduce){.piece-motion{display:none}}

/* Slim brushed-metal surround, entirely outside the interactive 8 x 8 grid. */
.board-frame{--rim:17px;position:relative;width:100%;padding:var(--rim);margin-bottom:13px;border:1px solid #514c58;border-radius:6px;background:radial-gradient(ellipse at 24% 0%,#d9d0e31c 0%,transparent 32%),radial-gradient(ellipse at 100% 72%,#c7bed817 0%,transparent 27%),radial-gradient(ellipse at 12% 100%,#ded5e60f 0%,transparent 24%),repeating-linear-gradient(0deg,#ffffff03 0,#ffffff03 1px,#00000006 1px,#00000006 3px),linear-gradient(135deg,#3b3741 0%,#29262f 34%,#232129 68%,#35313b 100%);box-shadow:inset 0 1px 0 #a59bab36,inset 1px 0 0 #a59bab18,inset 0 -1px 0 #0d0c13,0 3px 7px #09080d55}
.board-frame:after{content:'';position:absolute;inset:var(--rim);border-radius:2px;box-shadow:inset 0 1px 3px #08070b55;pointer-events:none}
.frame-engraving{position:absolute;z-index:1;pointer-events:none;user-select:none;color:#8651ab;font-family:Georgia,'Times New Roman',serif;font-size:11px;font-weight:700;line-height:1;letter-spacing:1.1px;text-shadow:0 -1px 0 #110b19b3,0 1px 0 #ad9ab526}
.frame-engraving.top{left:50%;top:calc(var(--rim)/2);transform:translate(-50%,-50%) rotate(180deg)}
.frame-engraving.bottom{left:50%;bottom:calc(var(--rim)/2);transform:translate(-50%,50%)}
.frame-engraving.left{left:calc(var(--rim)/2);top:50%;transform:translate(-50%,-50%) rotate(90deg)}
.frame-engraving.right{right:calc(var(--rim)/2);top:50%;transform:translate(50%,-50%) rotate(-90deg)}
@media(max-width:580px){.board-frame{--rim:13px;border-radius:5px}.frame-engraving{font-size:9px;letter-spacing:.8px}}