:root{--ink:#1b1915;--paper:#eee3cc;--wood:#c99a5c;--red:#a62f25;--muted:#8b8478}
*{box-sizing:border-box}body{margin:0;background:#191713;color:#f6f0e5;font-family:"Noto Sans TC",sans-serif;min-height:100vh;background-image:radial-gradient(circle at 12% 20%,#302a22 0,transparent 35%),linear-gradient(135deg,#1d1a16,#111)}
main{max-width:1400px;margin:auto;min-height:100vh;padding:0 5vw}header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff16}
.brand{color:#fff;text-decoration:none;font:900 24px "Noto Serif TC";letter-spacing:.18em}.brand span{color:#d05345}.connection{font-size:13px;color:#b9b2a7}.connection i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#d6aa55;margin-right:8px;box-shadow:0 0 8px #d6aa55}.connection.online i{background:#6b9d69}
.lobby{min-height:calc(100vh - 96px);display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:9vw;padding:8vh 3vw}.eyebrow{font-size:11px;letter-spacing:.35em;color:#c7a468;font-weight:700}.intro h1{font:900 clamp(42px,6vw,82px)/1.25 "Noto Serif TC";letter-spacing:.04em;margin:20px 0 30px}.intro h1 em{font-style:normal;color:#c8493d}.intro>p:last-child{max-width:560px;color:#aaa195;line-height:2;font-size:16px}
.join-card{position:relative;background:#f0e6d3;color:var(--ink);padding:46px 42px 36px;box-shadow:0 24px 80px #0008}.join-card:before{content:"";position:absolute;inset:10px;border:1px solid #382c1d25;pointer-events:none}.seal{position:absolute;right:30px;top:14px;border:2px solid var(--red);color:var(--red);padding:6px 10px;font:700 24px "Noto Serif TC";transform:rotate(6deg)}.join-card h2{font:900 34px "Noto Serif TC";margin:0 0 28px}.join-card label{display:block;font-size:12px;font-weight:700;margin:18px 0}.join-card input{width:100%;display:block;margin-top:8px;border:0;border-bottom:1px solid #8d826f;background:transparent;padding:12px 2px;font:16px inherit;outline:0;text-transform:uppercase}.join-card input:focus{border-color:var(--red)}button{font:inherit;cursor:pointer}.join-card button{width:100%;margin-top:20px;border:0;background:var(--ink);color:white;padding:16px;text-align:left;font-weight:700;letter-spacing:.12em}.join-card button span{float:right}.join-card small{display:block;text-align:center;color:#857b6c;margin-top:16px}
.hidden{display:none!important}.game{display:grid;grid-template-columns:260px 1fr;gap:5vw;padding:5vh 0 7vh}.game-info{display:flex;flex-direction:column;justify-content:space-between;padding:12px 0}.game-info h2{font:900 32px "Noto Serif TC";margin:8px 0}.room-label{font-family:monospace;color:#d1b278;letter-spacing:.16em}.secondary{border:1px solid #ffffff30;background:transparent;color:#eee;padding:11px 16px}.players{margin:40px 0 auto}.player{border-top:1px solid #ffffff17;padding:16px 0;display:flex;justify-content:space-between}.player b.red{color:#e06458}.player b.black{color:#aaa}.actions{display:flex;gap:16px}.text-button{border:0;background:none;color:#999;text-decoration:none;padding:0;font-size:13px}
.board-area{display:flex;flex-direction:column;align-items:center}.status{margin-bottom:16px;color:#d1c8b9;font:700 16px "Noto Serif TC";letter-spacing:.08em}.board{position:relative;width:min(70vw,630px);aspect-ratio:9/10;background:#d9ab6c;box-shadow:0 20px 60px #0009,inset 0 0 0 4px #69421f,inset 0 0 0 8px #d9ab6c,inset 0 0 0 10px #69421f}
.grid-lines{position:absolute;z-index:0;inset:5.5% 6%;border:1px solid #62401f;background:repeating-linear-gradient(to bottom,#62401f 0 1px,transparent 1px 11.111%);pointer-events:none}.grid-lines:before,.grid-lines:after{content:"";position:absolute;left:0;right:0;height:44.444%;background:repeating-linear-gradient(to right,#62401f 0 1px,transparent 1px 12.5%);border-right:1px solid #62401f}.grid-lines:before{top:0}.grid-lines:after{bottom:0}.river{position:absolute;left:0;right:0;top:44.444%;height:11.111%;display:flex;align-items:center;justify-content:center;color:#4e2e17;font:700 clamp(15px,3vw,28px) "Noto Serif TC";letter-spacing:.42em;white-space:pre;transform:rotate(-2deg)}
.palace{position:absolute;left:37.5%;width:25%;height:22.222%;z-index:1;background:linear-gradient(to top right,transparent calc(50% - .7px),#62401f 50%,transparent calc(50% + .7px)),linear-gradient(to bottom right,transparent calc(50% - .7px),#62401f 50%,transparent calc(50% + .7px))}.palace.top{top:0}.palace.bottom{bottom:0}
.cell{--board-left:6%;--board-top:5.5%;--file-gap:11%;--rank-gap:9.8889%;position:absolute;z-index:2;left:calc(var(--board-left) + var(--x) * var(--file-gap));top:calc(var(--board-top) + var(--y) * var(--rank-gap));width:11%;height:9.89%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}.piece{z-index:2;width:80%;aspect-ratio:1;border-radius:50%;border:2px solid currentColor;background:#ead7b3;box-shadow:0 3px 5px #4d2b18aa,inset 0 0 0 3px #ead7b3,inset 0 0 0 4px currentColor;color:#25231f;font:900 clamp(16px,3.2vw,31px) "Noto Serif TC";display:grid;place-items:center;transition:.15s}.piece.moving{animation:piece-move .34s cubic-bezier(.22,.8,.25,1);will-change:transform,filter}.piece.red{color:#a22620}.piece.selected{transform:translateY(-5px);box-shadow:0 7px 10px #30190dcc,0 0 0 4px #f1cb62}.cell.target:after{content:"";z-index:3;width:13px;height:13px;border-radius:50%;background:#3d6d4dcc;position:absolute}.cell.capture:after{content:"";position:absolute;inset:6%;border:3px solid #a62f25;border-radius:50%;z-index:3}
@keyframes piece-move{0%{transform:translate(var(--move-x),var(--move-y)) scale(.94);filter:brightness(1.18);box-shadow:0 10px 16px #30190dcc,inset 0 0 0 3px #ead7b3,inset 0 0 0 4px currentColor}70%{transform:translate(0,0) scale(1.04)}100%{transform:translate(0,0) scale(1);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.piece.moving{animation:none}.piece{transition:none}}
.secondary+.secondary{margin-left:6px}
.undo-panel{margin:18px 0;padding:14px;border:1px solid #ffffff24;background:#ffffff0b;color:#d8cdbb;font-size:13px;line-height:1.6}.undo-panel p{margin:0}.undo-response{margin-top:10px}.undo-response .secondary{padding:8px 14px}
.text-button:disabled{opacity:.35;cursor:not-allowed}
.sandbox-toolbar{min-height:42px;margin:-5px 0 14px;display:flex;justify-content:center}.sandbox-toolbar .secondary{padding:8px 14px}.sandbox-toolbar .secondary:disabled{opacity:.35;cursor:not-allowed}
.setup-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;max-width:min(94vw,760px);padding:10px;border:1px solid #54dce855;background:#07171fe8}.setup-controls label{display:flex;align-items:center;gap:5px;color:#9ed9de;font-size:12px}.setup-controls select{border:1px solid #4bcbd8;background:#071118;color:#e6fcff;padding:7px}.setup-controls .secondary{margin:0}
.side-section{margin-top:22px;padding-top:14px;border-top:1px solid #52d9e429}.side-section-title{margin:0 0 9px;color:#6f9ba2;font:700 10px monospace;letter-spacing:.16em}.side-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.side-tool-grid .secondary{width:100%;margin:0;padding:9px 8px;text-align:center;font-size:12px}.side-tool-grid #setup-enter{grid-column:1/-1}.in-game-color{display:block;margin-top:16px;color:#aaa}.side-choice-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.side-choice-row .side-button{width:100%;padding:9px;margin:0}.piece.covered{color:#9ef3f6!important;background:radial-gradient(circle,#16323c,#071117 72%);border-color:#5cdce7;box-shadow:0 4px 9px #000c,0 0 0 2px #153f49,0 0 16px #36d6e455,inset 0 0 0 3px #0b2028,inset 0 0 0 4px #59dce6;text-shadow:0 0 10px #55e8f2}.piece.revealed{animation:piece-move .34s cubic-bezier(.22,.8,.25,1),piece-reveal .55s ease-out .28s}@keyframes piece-reveal{0%{filter:brightness(2);transform:rotateY(90deg) scale(.9)}100%{filter:brightness(1);transform:rotateY(0) scale(1)}}
.color-choice{border:0;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}.color-choice legend{font-size:12px;font-weight:700;margin-bottom:8px}.color-choice label{margin:0!important;border:1px solid #8d826f55;padding:10px;display:flex!important;align-items:center;gap:8px;cursor:pointer}.color-choice label:has(input:checked){border-color:var(--red);background:#c8493d0d}.color-choice input{width:auto!important;margin:0!important}.color-disc{width:30px;height:30px;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;font:700 17px "Noto Serif TC"}.color-disc.red{color:#b83f35}.color-disc.black{color:#28231c}
.replay-panel{margin:18px 0;padding:14px;border:1px solid #c7a46855;background:#c7a4680b}.replay-panel>p{margin:0 0 10px}.replay-buttons{display:flex;flex-wrap:wrap;gap:6px}.replay-buttons .secondary{padding:7px 10px;margin:0}.replay-share{display:flex;gap:14px;margin-top:12px}
.mode-choice{border:0;padding:0;margin:0 0 12px;display:flex;gap:8px}.mode-choice legend{font-size:12px;font-weight:700;margin-bottom:8px}.mode-choice label{margin:0!important;flex:1;border:1px solid #8d826f55;padding:10px;cursor:pointer}.mode-choice label:has(input:checked){border-color:var(--red);background:#c8493d0d}.mode-choice input{width:auto!important;display:inline!important;margin:0 7px 0 0!important}
.capture-fx{position:absolute;z-index:8;left:calc(6% + var(--fx-x) * 11%);top:calc(5.5% + var(--fx-y) * 9.8889%);width:12%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}.capture-fx:before{content:"";position:absolute;inset:-18%;border:4px solid #f4d17a;border-radius:50%;box-shadow:0 0 0 5px #a2262055,0 0 30px #ffcb60;animation:capture-ring .62s ease-out forwards}.capture-fx:after{content:"吃";position:absolute;inset:0;display:grid;place-items:center;color:#fff1c4;text-shadow:0 2px 3px #5b160f,0 0 14px #e44832;font:900 clamp(22px,5vw,48px) "Noto Serif TC";animation:capture-word .68s ease-out forwards}.mate-fx{position:absolute;z-index:10;inset:0;display:grid;place-items:center;overflow:hidden;pointer-events:none;background:radial-gradient(circle,#f6d58444 0,#8b171188 48%,#160807dd 100%);animation:mate-screen 1.35s ease-out forwards}.mate-fx span{color:#fff0c1;border:4px double #f2c76f;padding:.16em .45em;background:#711e18dd;box-shadow:0 0 0 8px #e5b75c33,0 15px 50px #0009;text-shadow:0 3px 0 #67140f;font:900 clamp(48px,12vw,108px) "Noto Serif TC";letter-spacing:.12em;animation:mate-word 1.25s cubic-bezier(.18,.8,.24,1) forwards}@keyframes capture-ring{0%{opacity:1;transform:scale(.25) rotate(-15deg)}70%{opacity:.9}100%{opacity:0;transform:scale(2.1) rotate(18deg)}}@keyframes capture-word{0%{opacity:0;transform:scale(.2) rotate(-18deg)}35%{opacity:1;transform:scale(1.35) rotate(5deg)}100%{opacity:0;transform:scale(.9) translateY(-35%)}}@keyframes mate-screen{0%{opacity:0}15%,68%{opacity:1}100%{opacity:0}}@keyframes mate-word{0%{opacity:0;transform:scale(2.5) rotate(-5deg)}22%{opacity:1;transform:scale(.9) rotate(1deg)}38%{transform:scale(1.05)}100%{opacity:0;transform:scale(1)}}
.in-game-color{margin-top:14px;display:flex;align-items:center;gap:7px;color:#aaa;font-size:12px}.side-button{border:1px solid #ffffff30;background:transparent;color:#bbb;padding:7px 10px}.side-button.red.active{border-color:#e06458;color:#ff8d82;background:#a2262028}.side-button.black.active{border-color:#ccc;color:#fff;background:#ffffff16}.side-button:disabled{opacity:.35;cursor:not-allowed}
.check-fx{position:absolute;z-index:9;inset:0;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle,#f8d67b33 0,transparent 62%);animation:check-screen .9s ease-out forwards}.check-fx span{color:#fff0bd;border:3px double #e6b959;padding:.12em .38em;background:#6f2118dd;box-shadow:0 8px 28px #0008;text-shadow:0 2px 0 #64150f;font:900 clamp(38px,9vw,78px) "Noto Serif TC";letter-spacing:.12em;animation:check-word .82s ease-out forwards}@keyframes check-screen{0%{opacity:0}18%,65%{opacity:1}100%{opacity:0}}@keyframes check-word{0%{opacity:0;transform:scale(1.8)}25%{opacity:1;transform:scale(.94)}42%{transform:scale(1.04)}100%{opacity:0;transform:scale(1)}}
.cell.last-from:before,.cell.last-to:before{content:"";position:absolute;z-index:1;border-radius:50%;pointer-events:none}.cell.last-from:before{inset:14%;background:#6f4b2466;border:2px dashed #f4d17a}.cell.last-to:before{inset:7%;border:4px solid #f5c85e;box-shadow:0 0 16px #f8d56eaa}.piece.checked{animation:king-danger 1s ease-in-out infinite;z-index:4;background:#f3c6a8;box-shadow:0 0 0 5px #c3232b88,0 0 24px #ff3138,inset 0 0 0 3px #ead7b3,inset 0 0 0 4px currentColor}@keyframes king-danger{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.09);filter:brightness(1.2)}}
.cell.last-from:before,.cell.last-to:before{z-index:5}.cell.last-from:before{inset:12%;background:#063b4dcc;border:4px dashed #34e6ff;box-shadow:0 0 0 3px #061d26aa,0 0 20px #25d9ff}.cell.last-to:before{inset:-2%;border:5px solid #ffe04b;box-shadow:0 0 0 3px #4b310ddd,0 0 24px 5px #fff067cc}.piece.checked{color:#6d080d!important;background:#fff8e8;border-color:#ff2532;box-shadow:0 0 0 6px #fff,0 0 0 11px #e00020cc,0 0 34px 15px #ff334daa,inset 0 0 0 3px #fff4df,inset 0 0 0 5px #8d0711}@keyframes king-danger{0%,100%{transform:scale(1);filter:brightness(1);box-shadow:0 0 0 5px #fff,0 0 0 9px #d6001ccc,0 0 22px 9px #ff3048aa,inset 0 0 0 3px #fff4df,inset 0 0 0 5px #8d0711}50%{transform:scale(1.12);filter:brightness(1.2);box-shadow:0 0 0 7px #fff,0 0 0 14px #ed001fcc,0 0 42px 18px #ff1839dd,inset 0 0 0 3px #fff4df,inset 0 0 0 5px #8d0711}}
.last-move-layer{position:absolute;z-index:5;inset:0;pointer-events:none}.last-move-marker{position:absolute;left:calc(6% + var(--marker-x) * 11%);top:calc(5.5% + var(--marker-y) * 9.8889%);width:9.5%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-sizing:border-box}.last-move-marker.from{background:#063b4dcc;border:4px dashed #34e6ff;box-shadow:0 0 0 3px #061d26aa,0 0 20px #25d9ff}.last-move-marker.to{width:11%;border:5px solid #ffe04b;box-shadow:0 0 0 3px #4b310ddd,0 0 24px 5px #fff067cc}
.last-move-marker{width:8.4%;border-radius:42%;font-style:normal}.last-move-marker:after{position:absolute;right:-7px;top:-8px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fffaf0;font:700 12px "Noto Serif TC";box-shadow:0 2px 7px #30180daa}.last-move-marker.from{background:#e7f4e999;border:2px solid #176f70;box-shadow:inset 0 0 0 2px #f5fff5aa,0 0 0 2px #1b3e3a77,0 4px 12px #173f3b55;transform:translate(-50%,-50%) rotate(45deg)}.last-move-marker.from:after{content:"起";background:#176f70;transform:rotate(-45deg)}.last-move-marker.to{width:10.5%;border:3px solid #f4d06a;box-shadow:0 0 0 2px #6b431b,0 0 0 5px #f4d06a66,inset 0 0 0 2px #fff0b755,0 5px 18px #51301677;animation:last-landing 1.8s ease-in-out infinite}.last-move-marker.to:after{content:"落";background:#a83c2f;border:1px solid #f1cf7a}@keyframes last-landing{0%,100%{transform:translate(-50%,-50%) scale(1);filter:brightness(1)}50%{transform:translate(-50%,-50%) scale(1.045);filter:brightness(1.12)}}
.piece.checked{z-index:6;color:inherit!important;background:#ead7b3;border-color:currentColor;box-shadow:0 4px 7px #4d2b18bb,0 0 0 2px #fff0bdcc,0 0 18px 6px #f1b94b88,inset 0 0 0 3px #ead7b3,inset 0 0 0 4px currentColor;animation:king-warning 1.35s ease-in-out infinite}.piece.checked:after{content:"將";position:absolute;right:-12%;top:-18%;width:25px;height:25px;display:grid;place-items:center;border-radius:5px;background:#7d261f;color:#fff2c6;border:1px solid #e8c576;box-shadow:0 3px 8px #3a1a10aa;font:800 13px/1 "Noto Serif TC";transform:rotate(5deg)}@keyframes king-warning{0%,100%{transform:translateY(0);filter:brightness(1);box-shadow:0 4px 7px #4d2b18bb,0 0 0 2px #fff0bdcc,0 0 14px 4px #f1b94b66,inset 0 0 0 3px #ead7b3,inset 0 0 0 4px currentColor}50%{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 6px 10px #4d2b18bb,0 0 0 3px #fff0bdd9,0 0 24px 8px #f1b94b99,inset 0 0 0 3px #ead7b3,inset 0 0 0 4px currentColor}}
@media(prefers-reduced-motion:reduce){.piece.checked{animation:none}}
.board{background-color:#080d12;background-image:linear-gradient(#54d7e808 1px,transparent 1px),linear-gradient(90deg,#54d7e808 1px,transparent 1px),radial-gradient(circle at 50% 48%,#123442 0,#09131b 42%,#05080c 100%);background-size:22px 22px,22px 22px,100% 100%;box-shadow:0 22px 70px #000c,0 0 0 1px #4bd7e755,0 0 32px #18bad733,inset 0 0 0 4px #030608,inset 0 0 0 7px #172c35,inset 0 0 42px #071017}.grid-lines{border-color:#57d7e3aa;background:repeating-linear-gradient(to bottom,#57d7e3aa 0 1px,transparent 1px 11.111%);filter:drop-shadow(0 0 3px #19bcd8aa)}.grid-lines:before,.grid-lines:after{background:repeating-linear-gradient(to right,#57d7e3aa 0 1px,transparent 1px 12.5%);border-right-color:#57d7e3aa}.palace{background:linear-gradient(to top right,transparent calc(50% - .7px),#57d7e3cc 50%,transparent calc(50% + .7px)),linear-gradient(to bottom right,transparent calc(50% - .7px),#57d7e3cc 50%,transparent calc(50% + .7px));filter:drop-shadow(0 0 3px #19bcd888)}.river{color:#72e6ef;text-shadow:0 0 10px #1fc9df,0 2px 0 #020609;opacity:.9}.piece{background:linear-gradient(145deg,#e8eef0,#aebbc0);box-shadow:0 5px 9px #000c,0 0 0 1px #bfeff2aa,0 0 12px #35cfe333,inset 0 0 0 3px #dbe3e4,inset 0 0 0 4px currentColor}.piece.red{color:#d5333b;background:linear-gradient(145deg,#fff0e8,#c9b3ad);text-shadow:0 0 8px #ff384855}.piece.black{color:#07333b;background:linear-gradient(145deg,#d8fbff,#71bec8);border-color:#0b5c68;text-shadow:0 1px 0 #eaffff}.piece.selected{box-shadow:0 8px 14px #000d,0 0 0 3px #bffaff,0 0 22px #38dced}.cell.target:after{background:#62f4c8;box-shadow:0 0 10px #38f8c9}.cell.capture:after{border-color:#ff5260;box-shadow:0 0 14px #ff334d}.piece.checked{background:linear-gradient(145deg,#fff5db,#c9b78f);box-shadow:0 4px 7px #000c,0 0 0 2px #ffe29acc,0 0 18px 6px #f1b94b88,inset 0 0 0 3px #eee2c8,inset 0 0 0 4px currentColor}
body{background-color:#04080c;background-image:radial-gradient(circle at 14% 24%,#0c82933d 0,transparent 28%),radial-gradient(circle at 86% 72%,#6d173733 0,transparent 30%),linear-gradient(#4bdbea09 1px,transparent 1px),linear-gradient(90deg,#4bdbea09 1px,transparent 1px),linear-gradient(145deg,#071119,#020406 72%);background-size:auto,auto,42px 42px,42px 42px,auto;background-attachment:fixed}body:before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 48%,#55e8f20a 49%,transparent 50% 100%),radial-gradient(circle at center,transparent 35%,#0009 100%)}main{max-width:1440px}header{border-color:#56d8e331;background:linear-gradient(90deg,transparent,#0e2a3333,transparent);position:relative}header:after{content:"";position:absolute;left:0;bottom:-1px;width:120px;height:1px;background:#62e8f5;box-shadow:0 0 12px #39d8ed}.brand{color:#eafcff;text-shadow:0 0 18px #49dceb55}.brand span{color:#5de5ef}.connection{color:#94aeb5}.connection i{background:#f0bc54;box-shadow:0 0 10px #f0bc54}.connection.online i{background:#61eab9;box-shadow:0 0 10px #61eab9}.lobby{position:relative}.lobby:before{content:"XIANGQI // ONLINE ARENA";position:absolute;left:3vw;top:5.5vh;color:#57d8e321;font:700 clamp(42px,7vw,96px)/1 monospace;letter-spacing:.04em;white-space:nowrap;pointer-events:none}.intro{position:relative;z-index:1}.eyebrow{color:#64e5ef;font-family:monospace;text-shadow:0 0 12px #48ddeb}.intro .eyebrow:before{content:"●";margin-right:10px;color:#65edba;animation:signal-pulse 1.8s ease-in-out infinite}.intro h1{color:#effcff;text-shadow:0 0 28px #3ddced1c}.intro h1 em{color:#6ce9f2;text-shadow:0 0 22px #39dced55}.intro>p:last-of-type{color:#a9bdc2}.intro-features{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.intro-features span{padding:8px 13px;border:1px solid #4dd7e94d;background:#07171fc7;color:#a9e9ee;font:700 11px monospace;letter-spacing:.12em;box-shadow:inset 3px 0 #54dce8}.join-card{color:#d8f2f4;background:linear-gradient(145deg,#0c1b23f2,#071016f5);border:1px solid #50dce859;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));box-shadow:0 26px 90px #000c,0 0 36px #1cbfd521}.join-card:before{inset:9px;border-color:#53d9e32e;clip-path:inherit}.join-card:after{content:"SYSTEM READY";position:absolute;right:34px;bottom:15px;color:#5fe9bb77;font:700 9px monospace;letter-spacing:.18em}.seal{color:#65e5ed;border-color:#65e5ed;text-shadow:0 0 9px #47dce8;box-shadow:0 0 14px #39d7e522}.join-card h2{color:#f2fdff}.join-card label,.join-card legend{color:#9db5bb}.join-card input{color:#eafcff;border-color:#54727a;background:transparent}.join-card input::placeholder{color:#5f7379}.join-card input:focus{border-color:#5fe6ef;box-shadow:0 5px 10px -8px #52e7f5}.mode-choice label,.color-choice label{border-color:#4e778055;background:#061017}.mode-choice label:has(input:checked),.color-choice label:has(input:checked){border-color:#54deea;background:#12323b;box-shadow:inset 3px 0 #56e2ec,0 0 12px #35cfe322}.color-disc.black{color:#62dce7}.join-card button{background:linear-gradient(90deg,#117988,#12a5a9);color:#efffff;border:1px solid #66f0f2;box-shadow:0 0 20px #1ed4df35;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}.join-card button:hover{filter:brightness(1.12);box-shadow:0 0 26px #37dce866}.join-card small{color:#71878c}.game-info{padding:22px 18px;background:linear-gradient(180deg,#0a1720cc,#07101699);border:1px solid #43cad72e;box-shadow:0 18px 50px #0007}.room-label{color:#63e3ec}.secondary,.side-button{border-color:#54cbd950;background:#09181f;color:#b9dfe3}.secondary:hover,.side-button:hover{border-color:#61e8f1;color:#efffff;box-shadow:0 0 12px #34d6e42e}.player{border-color:#52d9e424}.undo-panel,.replay-panel{border-color:#47cbd54d;background:#07171f}.text-button{color:#83b8bd}.text-button:hover{color:#69e6ef}.status{color:#aeeff3;text-shadow:0 0 12px #3dd8e866}.toast{background:#09232b;color:#dffcff;border:1px solid #57dce8;box-shadow:0 10px 36px #000b,0 0 20px #39d7e43d}@keyframes signal-pulse{0%,100%{opacity:.45}50%{opacity:1;text-shadow:0 0 10px #62edba}}
@media(max-width:800px){.lobby:before{top:4vh;left:0;font-size:36px}.intro-features{margin-top:22px}.join-card{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}.game-info{padding:18px 14px}}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);opacity:0;background:#09232b;color:#dffcff;border:1px solid #57dce8;box-shadow:0 10px 36px #000b,0 0 20px #39d7e43d;padding:12px 20px;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:800px){main{padding:0 18px}header{height:72px}.lobby{grid-template-columns:1fr;padding:6vh 0;gap:5vh}.intro h1{font-size:42px}.intro>p:last-child{font-size:14px}.join-card{padding:38px 28px 30px}.game{grid-template-columns:1fr;padding-top:24px}.game-info{display:block}.players{margin:20px 0}.actions{display:none}.board{width:min(94vw,630px)}.status{margin-top:4px}.piece{font-size:clamp(15px,5vw,28px)}}
@media(max-width:800px){.actions{display:flex;margin:14px 0 22px}}
.captured-panel{margin:14px 0 0;padding:12px;border:1px solid #52d9e437;background:#06131a}.captured-list{display:flex;flex-wrap:wrap;gap:6px;min-height:24px}.captured-list em{color:#66848a;font-size:11px}.captured-chip{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#d7e9e8;color:#12343b;border:1px solid #62dce6;font:800 14px "Noto Serif TC"}.captured-chip.red{color:#b5252d;background:#f3ded8}.captured-panel small{display:block;margin-top:7px;color:#5d8c92;font-size:9px;letter-spacing:.12em}
.captured-list{display:grid;gap:9px}.captured-group{display:grid;grid-template-columns:58px 1fr;align-items:start;gap:7px}.captured-group b{padding-top:5px;color:#83cbd1;font-size:10px;letter-spacing:.08em}.captured-row{display:flex;flex-wrap:wrap;gap:5px;min-height:27px}.captured-chip.covered-capture{color:#8cecf2;background:#10252d;border-style:dashed;box-shadow:inset 0 0 8px #49d9e52b}
.piece{position:relative}.piece.revealed{animation:piece-move .34s cubic-bezier(.22,.8,.25,1)}.piece.revealed:before{content:"暗";position:absolute;z-index:3;inset:-2px;display:grid;place-items:center;border-radius:50%;color:#9ef3f6;background:radial-gradient(circle,#16323c,#071117 72%);border:2px solid #5cdce7;box-shadow:0 0 16px #36d6e477,inset 0 0 0 3px #0b2028;font:inherit;text-shadow:0 0 10px #55e8f2;backface-visibility:hidden;transform-origin:center;animation:reveal-cover .58s cubic-bezier(.4,0,.2,1) forwards}@keyframes reveal-cover{0%,48%{opacity:1;transform:perspective(180px) rotateY(0) scale(1)}72%{opacity:1;transform:perspective(180px) rotateY(86deg) scale(.98)}100%{opacity:0;transform:perspective(180px) rotateY(90deg) scale(.96)}}
@media(prefers-reduced-motion:reduce){.piece.revealed:before{animation:none;display:none}}