*{margin:0;padding:0;box-sizing:border-box}:root{--cell: 70px;--label: 28px;--stick-w: 10px;--stick-h: 44px}body{font-family:Segoe UI,Arial,sans-serif;background:#1a1a2e;color:#eee;min-height:100vh;-webkit-user-select:none;user-select:none}.app{display:flex;flex-direction:column;align-items:center;padding:16px;min-height:100vh}.title{font-size:28px;letter-spacing:3px;color:#ccc;margin-bottom:12px}.center-msg{font-size:18px;color:#888;margin-top:40vh}.main-layout{display:flex;gap:20px;width:100%;max-width:1000px;justify-content:center}.game-side{display:flex;flex-direction:column;align-items:center}.lobby{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:300px;width:100%;max-width:500px;text-align:center}.lobby h2{margin-bottom:4px}.lobby-players{font-size:18px;margin-bottom:8px}.vs{color:#666;margin:0 10px;font-style:italic}.color-buttons{display:flex;gap:10px;margin-top:12px}.color-request{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:12px}.white-btn{background:#666!important}.white-btn:hover{background:#777!important}.black-btn{background:#333!important;border:1px solid #555}.black-btn:hover{background:#444!important}.board-container{display:flex;flex-direction:column;align-items:center;gap:10px}.score{display:flex;gap:30px;font-size:15px}.score-white{color:#ddd;text-shadow:0 0 2px #000}.score-black{color:#888}.board-wrapper{display:flex}.row-labels{display:flex;flex-direction:column}.row-label{width:var(--label);height:var(--cell);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#999}.board-area{display:flex;flex-direction:column}.board{display:grid;grid-template-columns:repeat(8,var(--cell));grid-template-rows:repeat(8,var(--cell));border:3px solid #444}.col-labels{display:flex}.col-label{width:var(--cell);height:var(--label);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#999}.cell{width:var(--cell);height:var(--cell);position:relative;cursor:pointer}.cell.light{background:#f0d9b5}.cell.dark{background:#b58863}.cell.selected{box-shadow:inset 0 0 0 4px #ffeb3b;z-index:1}.cell.valid-move:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;background:#4caf5099;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.cell.valid-capture{box-shadow:inset 0 0 0 4px #f44336;z-index:1}.cell.setup-available{box-shadow:inset 0 0 0 3px #64c8ff66}.cell.last-from:before,.cell.last-to:before,.cell.last-rotate:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.cell.last-from:before{background:#ffeb3b38}.cell.last-to:before{background:#ffeb3b61;animation:pulse-yellow .5s ease-out}.cell.last-rotate:before{background:#64c8ff4d;animation:pulse-blue .5s ease-out}@keyframes pulse-yellow{0%{background:#ffeb3bb3}to{background:#ffeb3b61}}@keyframes pulse-blue{0%{background:#64c8ff99}to{background:#64c8ff4d}}.stick{position:absolute;top:50%;left:50%;width:var(--stick-w);height:var(--stick-h);border-radius:5px;pointer-events:none;transform:translate(-50%,-50%)}.stick.horizontal{transform:translate(-50%,-50%) rotate(90deg)}.stick.diag-right{transform:translate(-50%,-50%) rotate(45deg)}.stick.diag-left{transform:translate(-50%,-50%) rotate(-45deg)}.stick.white-piece{background:#f5f5f0;border:1.5px solid #222;box-shadow:1px 1px 3px #0000004d}.stick.black-piece{background:#1a1a1a;border:1.5px solid #ddd;box-shadow:1px 1px 3px #0000004d}.star-container{position:absolute;width:100%;height:100%;pointer-events:none}.star-container .stick{width:8px;height:38px}.star-container .stick:nth-child(1){transform:translate(-50%,-50%) rotate(0)}.star-container .stick:nth-child(2){transform:translate(-50%,-50%) rotate(60deg)}.star-container .stick:nth-child(3){transform:translate(-50%,-50%) rotate(120deg)}.controls{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:60px;margin-top:4px}.palette{display:flex;gap:10px}.palette-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:8px 14px;border-radius:8px;border:2px solid transparent;background:#ffffff0d;transition:border-color .15s,background .15s}.palette-item:hover{border-color:#aaa;background:#ffffff1a}.palette-item.selected{border-color:#ffeb3b;background:#ffeb3b1a}.palette-item.disabled{opacity:.25;cursor:not-allowed}.palette-preview{width:44px;height:44px;position:relative}.palette-preview .stick{width:8px;height:34px}.palette-count{font-size:13px;color:#aaa}.rotation-section{display:flex;flex-direction:column;align-items:center;gap:4px}.rotation-panel{display:flex;gap:10px}.rotation-btn{width:52px;height:52px;position:relative;cursor:pointer;border-radius:8px;border:2px solid #555;background:#2a2a4a;transition:border-color .15s}.rotation-btn:hover{border-color:#ffeb3b}.rotation-btn.current{border-color:#4caf50;opacity:.4;cursor:default}.rotation-btn .stick{width:7px;height:30px}.btn-row{display:flex;gap:10px;align-items:center}.btn{padding:10px 22px;font-size:15px;border:none;border-radius:8px;cursor:pointer;background:#3f51b5;color:#fff;transition:background .15s}.btn:hover{background:#5c6bc0}.btn.green{background:#388e3c}.btn.green:hover{background:#43a047}.btn.red{background:#c62828}.btn.red:hover{background:#d32f2f}.label-small,.hint{font-size:13px;color:#888}.info{font-size:16px;text-align:center}.countdown{font-size:24px;font-weight:700;color:#ffeb3b}.gameover{font-size:20px}.chat{width:280px;min-width:280px;background:#16213e;border-radius:12px;display:flex;flex-direction:column;height:640px}.chat-header{padding:12px 16px;font-weight:700;border-bottom:1px solid #333;font-size:15px}.chat-messages{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px}.chat-msg{font-size:13px;line-height:1.4}.chat-msg.system{color:#888;font-style:italic}.chat-from{font-weight:700;margin-right:6px}.chat-input{display:flex;gap:6px;padding:8px;border-top:1px solid #333}.chat-input input{flex:1;padding:8px 12px;border-radius:6px;border:1px solid #333;background:#0f3460;color:#eee;font-size:14px;outline:none}.chat-input input:focus{border-color:#3f51b5}.chat-send{padding:8px 14px}@media (max-width: 700px){:root{--cell: min(70px, calc((100vw - 60px)/8) );--label: 22px;--stick-w: 7px;--stick-h: calc(var(--cell) * .6)}.app{padding:8px}.title{font-size:20px;margin-bottom:8px}.main-layout{flex-direction:column;align-items:center;gap:12px}.lobby{min-height:200px}.color-buttons{flex-wrap:wrap;justify-content:center}.btn{padding:8px 16px;font-size:14px}.board-container{gap:6px}.row-label,.col-label{font-size:12px}.info{font-size:14px}.score{font-size:13px;gap:16px}.palette{gap:6px}.palette-item{padding:6px 8px}.palette-preview{width:36px;height:36px}.palette-preview .stick{width:6px;height:26px}.palette-count{font-size:11px}.rotation-panel{gap:6px}.rotation-btn{width:44px;height:44px}.rotation-btn .stick{width:5px;height:24px}.star-container .stick{width:6px;height:calc(var(--cell) * .5)}.cell.valid-move:after{width:14px;height:14px}.chat{width:100%;min-width:unset;max-width:500px;height:200px;border-radius:8px}.chat-header{padding:8px 12px;font-size:13px}.chat-messages{padding:6px 8px}.chat-msg{font-size:12px}.chat-input{padding:6px}.chat-input input{padding:6px 10px;font-size:13px}.chat-send{padding:6px 10px}}