*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:#312e2b;color:#bababa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh;display:flex;justify-content:center;align-items:center}.app{width:100%;max-width:1100px;padding:16px}.game-layout{display:flex;gap:24px;justify-content:center;align-items:center}.board-column{display:flex;flex-direction:column;gap:0}.player-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#272522;border-radius:6px;min-height:48px;transition:background .2s}.player-bar:first-child{border-radius:6px 6px 0 0}.player-bar:last-child{border-radius:0 0 6px 6px}.player-bar.active{background:#3d3a36}.player-avatar{width:32px;height:32px;flex-shrink:0}.player-avatar svg{width:100%;height:100%}.player-info{display:flex;flex-direction:column;gap:1px}.player-name{font-weight:700;font-size:14px;color:#e0e0e0}.piece-count{font-size:12px;color:#999}.board-wrapper{position:relative;line-height:0}.board{--board-size: min(82vh, 640px);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:var(--board-size);height:var(--board-size);border:2px solid #111;touch-action:none}.square{position:relative;width:100%;height:100%;cursor:pointer;-webkit-user-select:none;user-select:none}.square.light{background:#ebecd0}.square.dark{background:#779556}.square.selected{background:#ffff328c!important}.square.last-move.light{background:#f5f682}.square.last-move.dark{background:#b9ca43}.coord{position:absolute;font-size:11px;font-weight:700;pointer-events:none;z-index:2}.coord.rank{top:2px;left:3px}.coord.file{bottom:2px;right:3px}.square.light .coord{color:#779556}.square.dark .coord{color:#ebecd0}.turn-label{margin-left:auto;font-size:11px;color:#8f8f8f;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.player-bar.active .turn-label{color:#f0d36b}.piece{position:absolute;top:6%;right:6%;bottom:6%;left:6%;z-index:3;pointer-events:none;transition:transform .1s ease}.piece.dragging{filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));transform:scale(1.1);z-index:100}.piece svg{width:100%;height:100%;display:block}.square:hover .piece{transform:scale(1.04)}.move-dot{position:absolute;top:50%;left:50%;width:28%;height:28%;transform:translate(-50%,-50%);border-radius:50%;background:#0000002e;z-index:2;pointer-events:none}.capture-dot{position:absolute;top:4%;right:4%;bottom:4%;left:4%;border-radius:50%;border:5px solid rgba(0,0,0,.18);z-index:2;pointer-events:none}.side-panel{width:280px;display:flex;flex-direction:column;gap:12px;align-self:stretch}.panel-header{text-align:center;padding:12px;background:#272522;border-radius:6px}.panel-header h2{font-size:20px;color:#e0e0e0;margin-bottom:2px}.panel-sub{font-size:12px;color:#777}.game-status{text-align:center;padding:8px;min-height:32px}.status-turn{font-size:14px;color:#aaa}.status-result{font-size:16px;font-weight:700;color:#81b64c}.move-list-wrap{background:#272522;border-radius:6px;overflow:hidden;flex:1;display:flex;flex-direction:column;min-height:200px}.move-list-header{padding:8px 12px;font-size:13px;font-weight:700;color:#999;border-bottom:1px solid #3a3835;text-transform:uppercase;letter-spacing:.5px}.move-list{flex:1;overflow-y:auto;max-height:360px;padding:4px 0}.move-row{display:grid;grid-template-columns:36px 1fr 1fr;padding:3px 8px;font-size:13px;font-family:Consolas,Monaco,monospace}.move-row:nth-child(odd){background:#ffffff05}.move-num{color:#666;text-align:right;padding-right:8px}.move-cell{color:#ccc;padding:2px 4px;border-radius:3px;cursor:default}.move-cell:hover{background:#ffffff0f}.game-controls{display:flex;gap:8px}.btn{flex:1;padding:10px 16px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,transform .1s}.btn:active{transform:scale(.97)}.btn-primary{background:#81b64c;color:#fff}.btn-primary:hover{background:#6fa03e}.btn-secondary{background:#3d3a36;color:#ccc}.btn-secondary:hover{background:#4a4642}.move-list::-webkit-scrollbar{width:6px}.move-list::-webkit-scrollbar-track{background:transparent}.move-list::-webkit-scrollbar-thumb{background:#555;border-radius:3px}@media(max-width:960px){.game-layout{flex-direction:column;align-items:center}.board{--board-size: min(90vw, 90vh - 120px)}.side-panel{width:min(90vw,560px)}.move-list{max-height:200px}}.lobby-app{max-width:980px}.lobby-shell{width:100%;display:flex;flex-direction:column;gap:16px}.lobby-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;background:#272522;border-radius:10px}.lobby-header h1{font-size:28px;color:#f1f1f1;margin-bottom:4px}.lobby-header p{font-size:14px;color:#999}.connection-card,.notice-card,.empty-state{padding:12px 14px;background:#272522;border-radius:8px;color:#bbb}.connection-card{display:flex;justify-content:space-between;gap:12px}.connection-card small{color:#777}.notice-card{border:1px solid rgba(240,211,107,.35);color:#f0d36b}.table-section{display:flex;flex-direction:column;gap:10px}.table-section h2{font-size:15px;color:#ddd;text-transform:uppercase;letter-spacing:.5px}.table-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}.table-list.compact{opacity:.85}.table-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:#272522;border-radius:10px}.table-card strong,.table-card span,.table-card small{display:block}.table-card strong{color:#f1f1f1;margin-bottom:4px}.table-card span{color:#bbb;font-size:13px}.table-card small{color:#777;margin-top:3px}.table-card .btn{flex:0 0 auto;min-width:88px}.btn:disabled{opacity:.55;cursor:not-allowed}@media(max-width:720px){.lobby-header,.connection-card,.table-card{align-items:stretch;flex-direction:column}.table-card .btn{width:100%}}.nickname-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;background:#272522;border-radius:8px}.nickname-card strong,.nickname-card small{display:block}.nickname-card strong{color:#f1f1f1;margin-bottom:3px}.nickname-card small{color:#777}.nickname-card input,.seat-modal input[type=text],.seat-modal input[name=nickname]{min-width:220px;padding:10px 12px;border:1px solid #4a4642;border-radius:6px;background:#1f1d1a;color:#eee;font-size:14px;outline:none}.nickname-card input:focus,.seat-modal input[name=nickname]:focus{border-color:#81b64c}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px;background:#00000094}.seat-modal{width:min(420px,100%);padding:18px;background:#272522;border:1px solid #3d3a36;border-radius:12px;box-shadow:0 18px 60px #00000073}.seat-modal h2{margin-bottom:14px;color:#f1f1f1;font-size:22px}.field-label{display:block;margin:12px 0 7px;color:#aaa;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.seat-modal input[name=nickname]{width:100%}.color-choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.color-choice{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #4a4642;border-radius:8px;color:#ddd;cursor:pointer}.color-choice:has(input:checked){border-color:#81b64c;background:#81b64c1f}.color-choice input{accent-color:#81b64c}.choice-piece{width:26px;height:26px;border-radius:50%;display:inline-block;border:2px solid rgba(255,255,255,.22)}.choice-piece.white{background:#f4d77c}.choice-piece.black{background:#1f1f1f}.modal-error{margin-top:12px;color:#ff9d8b;font-size:13px}.modal-actions{display:flex;gap:10px;margin-top:16px}@media(max-width:720px){.nickname-card{align-items:stretch;flex-direction:column}.nickname-card input{width:100%;min-width:0}.color-choice-grid{grid-template-columns:1fr}}