@layer base{*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0;line-height:inherit}}@layer components{.fixed{position:fixed}.inset-0{top:0;right:0;bottom:0;left:0}.z-50{z-index:50}.flex{display:flex}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.bg-black{background-color:#000}.bg-white{background-color:#fff}.bg-opacity-50{--tw-bg-opacity: .5}.bg-green-500{background-color:#22c55e}.bg-blue-500{background-color:#3b82f6}.bg-red-500{background-color:#ef4444}.hover\:bg-blue-700:hover{background-color:#1d4ed8}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.p-6{padding:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.text-center{text-align:center}.text-white{color:#fff}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.transform{transform:translate(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\/2{--tw-translate-x: -50%}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1)}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.mr-4{margin-right:1rem}.mt-4{margin-top:1rem}.block{display:block}.top-5{top:1.25rem}.left-1\/2{left:50%}.w-full{width:100%}.text-gray-700{color:#374151}}body{font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;background-color:#f0f0f0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;margin:0;padding:20px;box-sizing:border-box}.board-container{display:flex;flex-direction:column;align-items:center;position:relative}.board{width:90vw;max-width:540px;height:100vw;max-height:600px;background-color:#f0d9b5;border:2px solid #8b4513;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(10,1fr);position:relative;box-shadow:0 10px 20px #0003;border-radius:8px}.square{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.square:before,.square:after{content:"";position:absolute;background-color:#8b4513;z-index:0}.square:not(:nth-child(9n)):before{width:100%;height:2px;left:50%;top:50%;transform:translateY(-50%)}.square:not(:nth-child(n+82)):after{width:2px;height:100%;left:50%;top:50%;transform:translate(-50%)}.square:nth-child(9n):before{display:none}.square:nth-child(n+82):after{display:none}.square:nth-child(n+37):nth-child(-n+45):after{display:none}.palace-line{position:absolute;background-color:#8b4513;z-index:0}.river-overlay{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;padding:0 12%;box-sizing:border-box;font-size:clamp(14px,3.5vw,22px);font-weight:700;color:#4a2a0a;pointer-events:none;z-index:1}.piece{width:80%;height:80%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(16px,4vw,24px);font-weight:700;cursor:pointer;position:relative;z-index:2;transition:transform .2s ease-out,box-shadow .2s ease-out;box-shadow:0 2px 4px #0003}.piece:hover{transform:scale(1.1);box-shadow:0 4px 8px #0000004d}.red-piece{background-color:#fcc;color:#c00;border:2px solid #c00}.black-piece{background-color:#ccc;color:#000;border:2px solid #000}.selected{border:3px solid #007bff!important;box-shadow:0 0 10px #007bff}.valid-move{background-color:#00ff004d;border-radius:50%;width:60%;height:60%;z-index:1}.message-area{margin-top:10px;margin-bottom:10px;padding:10px 20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;color:#333;font-size:1.1em;text-align:center;min-height:50px;width:90vw;max-width:540px}.scores{margin-top:10px;text-align:center;font-size:1.1em;color:#333;width:90vw;max-width:540px}.controls button{padding:6px 12px;font-size:.875em;line-height:1.5;color:#fff;background-color:#007bff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;display:inline-flex;align-items:center;justify-content:center}.controls button:hover{background-color:#0056b3}.highlight-button{animation:pulse 1.5s infinite;box-shadow:0 0 10px #007bff,0 0 20px #007bff;transform:scale(1.05)}@keyframes pulse{0%{box-shadow:0 0 10px #007bff}50%{box-shadow:0 0 20px #007bff,0 0 10px #fff}to{box-shadow:0 0 10px #007bff}}#musicToggleButton{display:flex;align-items:center;justify-content:center;background-color:#4a5568;color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.2rem;transition:all .3s ease;border:none;outline:none;cursor:pointer}#musicToggleButton:hover{background-color:#2d3748;transform:scale(1.05)}#musicToggleButton:active{transform:scale(.95)}@keyframes pulse{0%{box-shadow:0 0 #4a5568b3}70%{box-shadow:0 0 0 10px #4a556800}to{box-shadow:0 0 #4a556800}}#musicToggleButton.highlight{animation:pulse 1.5s infinite}.popup-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000000b3;color:#ffeb3b;font-weight:700;font-size:1.2rem;padding:8px 16px;border-radius:8px;z-index:10;text-align:center;max-width:90%;box-shadow:0 0 15px #ffeb3b80;border:1px solid #ffeb3b;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.popup-message:not(.hidden){animation:fadeIn .3s ease-out}