.checkerboard-container[data-v-e24425be]{display:flex;flex-direction:column;align-items:center;padding:10px;max-width:100%;box-sizing:border-box}.board[data-v-e24425be]{display:flex;flex-direction:column;flex-shrink:0;width:-moz-fit-content;width:fit-content;margin:0 auto}.row[data-v-e24425be]{display:flex}.cell[data-v-e24425be]{width:60px;height:60px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cell.playable[data-v-e24425be]{background-color:#8b4513}.cell[data-v-e24425be]:not(.playable){background-color:#f0d9b5}.cell.selected[data-v-e24425be]{background-color:gold}.cell.possible[data-v-e24425be]{background-color:#90ee90}.piece[data-v-e24425be]{width:50px;height:50px;border-radius:50%;position:relative}.white-piece[data-v-e24425be]{background-color:#fff;border:2px solid #333}.black-piece[data-v-e24425be]{background-color:#000;border:2px solid #fff}.white-king[data-v-e24425be]{background-color:#fff;border:2px solid #333;position:relative}.black-king[data-v-e24425be]{background-color:#000;border:2px solid #fff;position:relative}.black-king[data-v-e24425be]:after,.white-king[data-v-e24425be]:after{content:"👑";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;color:gold;z-index:1;line-height:1}.player-buttons[data-v-e24425be]{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;align-items:center}.player-buttons-row[data-v-e24425be]{display:flex;flex-direction:column;gap:10px;justify-content:center}.player-button[data-v-e24425be]{padding:10px 20px;font-size:16px;width:200px;border:2px solid #333;border-radius:5px;cursor:default;background-color:#d3d3d3;color:#333;text-align:center}.player-button.active-white[data-v-e24425be]{background-color:#fff;color:#000}.player-button.active-black[data-v-e24425be]{background-color:#000;color:#fff}.eaten-buttons[data-v-e24425be]{display:flex;flex-direction:row;gap:10px;margin-top:10px}.eaten-button[data-v-e24425be]{padding:10px;font-size:14px;width:95px;border:2px solid #333;border-radius:5px;background-color:beige;color:brown;text-align:center;cursor:default}@media (max-width:768px){.checkerboard-container[data-v-e24425be]{flex-direction:column;align-items:center;padding:5px;justify-content:center}.player-buttons[data-v-e24425be]{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;align-items:center;width:100%;max-width:90vw}.player-buttons-row[data-v-e24425be]{display:flex;flex-direction:row;gap:8px;justify-content:center;width:100%;max-width:90vw}.player-button[data-v-e24425be]{padding:8px 16px;font-size:14px;width:45%;max-width:160px;border:2px solid #333;border-radius:5px;background-color:#d3d3d3;color:#333;text-align:center}.eaten-buttons[data-v-e24425be]{display:flex;flex-direction:row;gap:8px;margin-top:8px;justify-content:center;width:100%;max-width:90vw}.eaten-button[data-v-e24425be]{padding:8px;font-size:12px;width:45%;max-width:160px;border:2px solid #333;border-radius:5px;background-color:beige;color:brown;text-align:center}.board[data-v-e24425be]{max-width:65vw;width:-moz-fit-content;width:fit-content;margin:0 auto}.cell[data-v-e24425be]{width:8vw;height:8vw;min-width:20px;min-height:20px}.piece[data-v-e24425be]{width:6vw;height:6vw;min-width:16px;min-height:16px}.black-king[data-v-e24425be]:after,.white-king[data-v-e24425be]:after{font-size:2.5vw;min-font-size:10px}}@media (max-width:480px){.player-buttons[data-v-e24425be]{gap:6px;margin-bottom:8px}.player-buttons-row[data-v-e24425be]{gap:6px}.player-button[data-v-e24425be]{padding:6px 12px;font-size:12px;width:45%;max-width:140px}.eaten-buttons[data-v-e24425be]{gap:6px;margin-top:6px}.eaten-button[data-v-e24425be]{padding:6px;font-size:10px;width:45%;max-width:140px}.cell[data-v-e24425be]{width:9vw;height:9vw;min-width:18px;min-height:18px}.piece[data-v-e24425be]{width:7vw;height:7vw;min-width:14px;min-height:14px}.black-king[data-v-e24425be]:after,.white-king[data-v-e24425be]:after{font-size:3vw;min-font-size:8px}}:root{--cell-size:min(8vw,60px);--tile-size:min(7vw,50px);--eaten-pieces-width:min(20vw,100px);--primary-color:#2c3e50;--danger-color:#e74c3c;--success-color:#27ae60;--warning-color:#f39c12}#app{font-family:Avenir,Helvetica,Arial,sans-serif;text-align:center;color:var(--primary-color);margin-top:20px;padding:0 20px;min-height:100vh}.game-wrapper,.rooms-view{max-width:800px;margin:0 auto;padding:0 15px;display:flex;flex-direction:column;min-height:80vh}.game-header{margin-bottom:20px}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);width:90%;max-width:400px;margin:auto}.form-group{margin-bottom:15px;text-align:left}.form-group label{display:block;margin-bottom:5px;font-weight:700}.form-group input{width:100%;padding:8px;box-sizing:border-box;border:1px solid #ddd;border-radius:4px;font-size:16px;transition:border-color .3s}.form-group input:focus{border-color:var(--primary-color);outline:none}button{background-color:var(--primary-color);color:#fff;padding:12px 20px;border:none;border-radius:4px;cursor:pointer;font-size:16px;transition:background-color .3s}button:hover{background-color:#34495e}.error{color:var(--danger-color)}.error,.switch-form{margin-top:10px}.switch-form a{color:var(--primary-color);text-decoration:none}.switch-form a:hover{text-decoration:underline}.rooms-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;margin-bottom:20px}.room-item{background:#f9f9f9;padding:15px;border-radius:8px;cursor:pointer;transition:background-color .3s}.room-item:hover{background:#e0e0e0}.room-info h3{margin:0 0 10px;font-size:18px}.room-info p{margin:5px 0}.room-actions{display:flex;gap:10px;justify-content:center;margin-bottom:20px}.action-btn{padding:10px 20px}.create-room-btn{background-color:var(--success-color)}.create-room-btn:hover{background-color:#219653}.refresh-btn{background-color:var(--warning-color)}.refresh-btn:hover{background-color:#e67e22}.logout-btn{background-color:var(--danger-color)}.logout-btn:hover{background-color:#c0392b}.leave-room-btn{background-color:var(--danger-color);margin-top:20px}.leave-room-btn:hover{background-color:#c0392b}.modal-buttons{display:flex;gap:10px;justify-content:center;margin-top:20px}