body{font-family:Arial,sans-serif;max-width:1200px;margin:0 auto;padding:20px;background-color:#f5f5f5}.container{display:grid;grid-template-columns:2fr 1fr;gap:20px}.board{background-color:#2d5016;border:2px solid #333;padding:20px;border-radius:8px}.board h2{color:#fff;margin-top:0}.board-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:20px}.square{aspect-ratio:1;background-color:#4a7c3c;border:1px solid #2d5016;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;cursor:pointer;transition:background-color .2s}.square:hover{background-color:#5a8c4c}.piece{width:70%;max-width:30px;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff}.piece.team-a{background-color:#ff6b6b}.piece.team-b{background-color:#4ecdc4}.piece.ball{background-color:#ffeb3b;color:#000}.game-info{color:#fff;margin:0;white-space:pre-wrap;font-family:monospace}.controls{display:flex;flex-direction:column;gap:6px}.controls label{font-size:12px;color:#666}.controls select,.controls input,.controls button{width:100%;box-sizing:border-box;padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;background-color:#fff}.controls button{cursor:pointer;background-color:#2196f3;border-color:#2196f3;color:#fff;font-weight:700}.controls button:hover{background-color:#1976d2}.sidebar{display:flex;flex-direction:column;gap:20px}.panel{background-color:#fff;border-radius:8px;padding:15px;box-shadow:0 2px 8px #0000001a}.panel h3{margin-top:0;color:#333}.status{padding:10px;border-radius:4px;margin-bottom:10px;font-weight:700}.status.connected{background-color:#c8e6c9;color:#2e7d32}.status.disconnected{background-color:#ffcdd2;color:#c62828}.status.connecting{background-color:#fff9c4;color:#f57f17}.backend-info{font-size:12px;color:#666;word-break:break-all}.moves-log{max-height:400px;overflow-y:auto;border:1px solid #ddd;border-radius:4px;padding:10px;background-color:#fafafa}.move-item{padding:8px;margin-bottom:8px;background-color:#fff;border-left:3px solid #2196f3;border-radius:2px;font-size:13px}.move-item.team-a{border-left-color:#ff6b6b}.move-item.team-b{border-left-color:#4ecdc4}.move-item .timestamp{font-size:11px;color:#999}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-box{background-color:#f5f5f5;padding:10px;border-radius:4px;text-align:center}.stat-box .label{font-size:12px;color:#666;margin-bottom:5px}.stat-box .value{font-size:20px;font-weight:700;color:#333}@media(max-width:800px){body{padding:10px}.container{grid-template-columns:1fr}.board-grid{gap:4px}}